@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/typography';
@use '../globals/layout';

.navbar-desktop-header {
  box-shadow: rgb(0 0 0 / 6%) 0 6px 24px;

  &__container {
    @extend %global-container;

    position: relative;
    display: flex;
    gap: 4rem;
    padding-block: var(--pix-spacing-4x);
  }
}

.navbar-desktop-header-container {
  &__menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}

.navbar-desktop-header-menu {
  &__list {
    display: flex;
    gap: var(--pix-spacing-8x);
  }

  &__link {
    @extend %pix-body-m;

    position: relative;
    display: block;
    margin-top: 2px;
    color: var(--pix-neutral-500);
    font-weight: var(--pix-font-medium);

    &::after {
      position: absolute;
      top: calc(100% + 2px);
      left: 0;
      width: 100%;
      height: 2px;
      background-color: transparent;
      content: '';
    }

    &.active {
      color: var(--pix-primary-500);

      &::after {
        background-color: currentcolor;
      }
    }

    &:focus {
      color: var(--pix-neutral-500);
    }

    &:hover {
      color: var(--pix-primary-500);
      cursor: pointer;
    }
  }
}

.navbar-desktop-header-right {
  display: flex;
  gap: var(--pix-spacing-4x);
  align-items: center;
}

/* Logo
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.navbar-desktop-header-logo {
  position: relative;
  display: flex;
  gap: var(--pix-spacing-8x);

  img {
    display: block;
    max-width: unset;
    height: 3rem;

    @include breakpoints.device-is('desktop') {
      height: 3.75rem;
    }
  }
}
