.header {
    height: 56px;
    background-color: var(--mantine-other-headerBgColor);
    border-bottom: 1px solid var(--mantine-other-headerBorderColor);
  }
  
  .inner {
    height: 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .link {
    display: block;
    line-height: 1;
    padding: 8px 12px;
    border-radius: var(--mantine-radius-sm);
    text-decoration: none;
    color: light-dark(var(--mantine-color-brand-gray-7), var(--mantine-color-brand-gray-0));
    font-size: var(--mantine-font-size-sm);
    font-weight: 500;
  
    @mixin hover {
      background-color: light-dark(var(--mantine-color-brand-gray-1), var(--mantine-color-brand-gray-8));
    }
  
    [data-mantine-color-scheme] &[data-active] {
      background-color: var(--mantine-other-navigationActiveColor);
      color: var(--mantine-color-white);
    }
  }