.header {
  height: rem(60px);
}

.inner {
  background-color: var(--mantine-color-black);
  padding: 0 calc(var(--mantine-spacing-xl) * 4);
  color: var(--mantine-color-white);
  height: rem(60px);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.links {
  text-transform: capitalize;

  @media (max-width: $mantine-breakpoint-sm) {
    display: none;
  }
}

.burger {
  @media (min-width: $mantine-breakpoint-lg) {
    display: none;
  }
}

.link {
  display: flex;
  align-items: center;
  padding: rem(8px) rem(12px);
  border-radius: var(--mantine-radius-default);
  text-decoration: none;
  color: var(--mantine-color-white);
  font-size: var(--mantine-font-size-sm);
  font-weight: 500;
  height: rem(38px);
  text-transform: capitalize;

  @mixin hover {
    transition: all ease 150ms;
    background-color: var(--mantine-color-dark-5);
  }

  @media (max-width: $mantine-breakpoint-sm) {
    color: var(--mantine-color-black);
  }
}

.linkLabel {
  margin-right: rem(5px);
}

.hiddenMobile {
  @media (max-width: $mantine-breakpoint-sm) {
    display: none;
  }
}

.hiddenDesktop {
  @media (min-width: $mantine-breakpoint-sm) {
    display: none;
  }
}
