@use 'globals';
@use 'spectre-css/variables';

@mixin subtle-box-shadow {
  box-shadow: variables.$light-gray 1px 1px 4px 0px;
}

header.header {
  z-index: 100;

  nav {
    align-items: center;
    background-color: #5baeca;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem 0.25rem 0.5rem;

    @include globals.desktop {
      background-color: transparent;
      padding: 1rem 0 1.5rem;
    }
  }

  .logo-link {
    border-radius: 3px;

    @include globals.desktop {
      order: 1;
    }

    img {
      max-height: 53px;
    }

    &:focus {
      outline: solid 1px variables.$primary-color;
    }
  }

  .search-and-menu-icon {
    align-items: center;
    display: flex;
    gap: 0.25rem;

    @include globals.desktop {
      order: 3;
    }
  }

  .search-and-menu-icon:has(#menu-toggle:focus) .icon-container {
    outline: solid 1px variables.$primary-color;
  }

  .header-search {
    input {
      border-radius: 1rem;
    }
  }

  .icon-container {
    border-color: variables.$light-gray;

    .icon {
      color: variables.$dark-color;
    }

    @include globals.desktop {
      display: none;
    }
  }

  .navigation-links {
    list-style-type: none;
    margin: 0;

    ul {
      list-style-type: none;
    }

    ul,
    li {
      margin: 0;
      padding: 0;
    }

    @include globals.mobile {
      @include subtle-box-shadow;
      background-color: white;
      bottom: 0;
      min-width: 10rem;
      padding-left: 0.5rem;
      padding-top: 0.5rem;
      position: fixed;
      right: 0;
      top: 0;
      transform: translateX(100%);
      transition: transform 250ms;
      z-index: 200;
    }

    @include globals.desktop {
      align-items: center;
      display: flex;
      flex: 1;
      gap: 0.75rem;
      order: 2;
      padding-left: 1rem;
    }
  }

  .link-group-label {
    display: flex;
    font-weight: bold;
    padding: 1rem 0.4rem 0.5rem;

    @include globals.desktop {
      border-radius: 0.2rem 0.2rem 0 0;
      color: variables.$primary-color;
      cursor: default;
      font-weight: 500;
      padding: 0.15rem 0.5rem;
      transition: all 150ms;
    }
  }

  .navigation-link-group {
    @include globals.desktop {
      height: 1.5rem;
      position: relative;
    }
  }

  .navigation-link-group > ul {
    @include globals.desktop {
      @include subtle-box-shadow;
      background-color: white;
      border-radius: 0 0.2rem 0.2rem 0.2rem;
      min-width: 100%;
      min-width: 7rem;
      opacity: 0;
      pointer-events: none;
      position: absolute;
      top: 1.5rem;
      transition: opacity 150ms;
    }
  }

  .navigation-link-group:focus-within > ul,
  .navigation-link-group:hover > ul {
    @include globals.desktop {
      opacity: 1;
      pointer-events: unset;
      z-index: 200;
    }
  }

  .navigation-link-group:focus-within > .link-group-label,
  .navigation-link-group:hover > .link-group-label {
    @include globals.desktop {
      background-color: variables.$primary-color;
      color: white;
    }
  }

  .navigation-link {
    > a {
      border: 0;
      text-align: left;
      transition: background-color 150ms;
      width: 100%;

      @include globals.desktop {
        padding-left: 0.5rem;
      }

      &:hover,
      &:focus {
        background-color: variables.$light-gray;
      }

      &.extra-space {
        @include globals.desktop {
          margin-top: 1.25rem;
        }
      }
    }
  }

  &:has(#menu-toggle:checked) {
    .navigation-links {
      transform: translateX(0);
    }

    .expanded-menu-label {
      bottom: 0;
      left: 0;
      position: fixed;
      right: 0;
      top: 0;
      z-index: 100;
    }
  }

  &:has(#menu-toggle:not(:checked)) {
    .expanded-menu-label {
      display: none;
    }
  }

  @include globals.desktop {
    .expanded-menu-label,
    #menu-toggle {
      display: none;
    }
  }
}
