.header {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
  background-color: var(--mantine-color-body);
  border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
}

.inner {
  @media (min-width: 25rem) {
    display: flex;
  }
  margin: auto;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.links {
  min-width: 11rem;
  flex-direction: column;
  justify-content: space-between;
}

.mainLinks {
  margin-right: calc(var(--mantine-spacing-sm) * -1);
}

.mainLink {
  text-transform: uppercase;
  font-size: var(--mantine-font-size-xs);
  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-1));
  padding: rem(7px) var(--mantine-spacing-sm);
  font-weight: 700;
  border-bottom: rem(2px) solid transparent;
  text-decoration: none;
  transition:
    border-color 200ms ease,
    color 100ms ease;

  @mixin hover {
    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
    text-decoration: none;
  }

  &[data-active] {
    color: light-dark(var(--mantine-color-black), var(--mantine-color-white));
    border-bottom-color: var(--mantine-color-blue-6);
  }
}
