@use "sass:math";
@use "../../tools/a11y";
@use "../../tools/colour";
@use "../../tools/grid";
@use "../../tools/media";
@use "../../tools/spacing";
@use "../../tools/typography";

.tna-global-header {
  @include colour.contrast;
  background: linear-gradient(
    0deg,
    rgb(34 34 34 / 100%) 0%,
    rgb(0 0 0 / 100%) 100%
  );

  @include colour.colour-font("font-base");

  .tna-template--dark-theme & {
    background: colour.brand-colour("black");
  }

  .tna-template--system-theme & {
    @media (prefers-color-scheme: dark) {
      background: colour.brand-colour("black");
    }
  }

  @include colour.on-high-contrast {
    background: colour.brand-colour("black");
  }

  &__main {
    padding-top: spacing.space(1);
    padding-bottom: spacing.space(1.5);
  }

  &__logo-wrapper {
    margin-top: spacing.space(0.5);

    display: flex;
  }

  &__logo {
    display: flex;
    align-items: flex-end;
    gap: spacing.space(1);

    text-decoration: none;

    &--link {
      &,
      &:link,
      &:visited {
        @include colour.colour-font("font-base");
      }

      &:hover {
        @include colour.colour-outline("font-dark", 0.3125rem, solid);
        outline-offset: 2px;
      }
    }
  }

  &__logo-strapline {
    padding-right: spacing.space(0.625);

    line-height: math.div(6.75rem, 3);
    text-transform: uppercase;

    @include typography.heading-font;
    @include typography.font-size(20);
  }

  &__navigation-button-wrapper {
    display: none;
  }

  &__hamburger {
    width: 2rem;
    height: 0.25rem;

    display: inline-block;

    @include colour.colour-background("font-dark");

    &::before,
    &::after {
      content: "";

      width: 2rem;
      height: 0.25rem;

      display: block;

      position: absolute;
      right: 0;

      background-color: inherit;
    }

    &::before {
      top: 0;
    }

    &::after {
      bottom: 0;
    }
  }

  &__navigation-button {
    height: 2rem;
    padding: 0;

    appearance: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;

    position: relative;

    color: inherit;

    background: none;

    border: 0 transparent solid;
    border-width: 0.25rem 0;
    border-radius: 0.1px;

    cursor: pointer;
    @include typography.main-font-weight-bold;
    @include typography.font-size(16);

    &:hover {
      @include typography.interacted-text-decoration;
    }

    &--opened {
      .tna-global-header__hamburger {
        height: 0;

        &::before {
          top: 0.625rem;

          transform: rotate(-135deg);
        }

        &::after {
          bottom: 0.625rem;

          transform: rotate(135deg);
        }
      }
    }
  }

  &__navigation-wrapper {
  }

  &__navigation {
    height: 100%;
    margin: spacing.space(0.5) 0 0;

    position: relative;

    columns: 2;
    column-gap: spacing.space(2);

    list-style: none;
  }

  &__navigation-item {
    break-inside: avoid;
  }

  &__navigation-item-link {
    min-width: 15rem;
    height: math.div(6.75rem, 3);

    display: block;
    box-sizing: border-box;

    line-height: math.div(6.75rem, 3);
    text-decoration: none;

    @include typography.font-size(17);

    @include colour.colour-border("keyline", 1px, solid, bottom);

    &,
    &:link,
    &:visited {
      @include colour.colour-font("font-base");
    }

    &:hover {
      @include typography.interacted-text-decoration;
    }
  }

  &__top-navigation {
    padding: 0 0 spacing.space(0.5);

    display: flex;
    justify-content: flex-end;
    gap: spacing.space(1.5);

    @include typography.font-size(15);
    list-style: none;
  }

  &__top-navigation-item {
  }

  &__top-navigation-link {
    display: flex;
    align-items: center;
    gap: spacing.space(0.5);

    text-decoration: none;

    &,
    &:link,
    &:visited {
      @include colour.colour-font("font-light");
    }

    &:hover,
    &:focus-visible {
      @include colour.colour-font("font-base");
    }

    &:hover {
      @include typography.interacted-text-decoration;
    }

    svg {
      height: 1em;

      display: inline-block;

      path {
        fill: currentColor;
      }
    }
  }

  .tna-logo {
    width: 6.75rem;

    flex-shrink: 0;
  }

  @include media.on-medium {
    &__navigation {
      column-gap: spacing.space(1);
    }

    &__navigation-item-link {
      @include typography.font-size(16);
    }

    &--collapse-on-medium &__navigation-wrapper {
      width: 100%;
    }

    &--collapse-on-medium &__top-navigation-wrapper {
      flex: 1;
      order: 2;
    }

    &--collapse-on-medium &__main {
      padding-bottom: spacing.space(1);
    }

    &--collapse-on-medium &__logo {
      gap: spacing.space(0.75);
    }

    &--collapse-on-medium &__logo-wrapper {
      margin-top: spacing.space(0.5);
      margin-bottom: spacing.space(0.5);
    }

    &--collapse-on-medium .tna-logo {
      width: 5rem;
    }

    &--collapse-on-medium &__logo-strapline {
      line-height: math.div(5rem, 3);
    }

    &--collapse-on-medium &__navigation {
      margin-bottom: spacing.space(0.5);
    }

    &--collapse-on-medium &__navigation,
    &--collapse-on-medium &__navigation-item,
    &--collapse-on-medium &__navigation-item-link {
      height: auto;
    }
  }

  @include media.on-mobile {
    &__main {
      padding-bottom: 0;
    }

    &__logo-wrapper,
    &__navigation-button-wrapper {
      margin-top: 0;
      margin-bottom: spacing.space(1);
    }

    &__logo {
      gap: spacing.space(0.75);
    }

    &__navigation-button-wrapper {
      display: flex;
      align-items: center;
    }

    &__navigation,
    &__navigation-item,
    &__navigation-item-link {
      height: auto;
    }

    &__navigation {
      margin-top: 0;

      columns: 1;

      background-color: rgb(255 255 255 / 10%);

      @include colour.colour-border("keyline-dark", 2px, solid, top);
      @include colour.colour-border("keyline-dark", 2px, solid, bottom);
    }

    &__navigation-item {
      flex-direction: column;
      align-items: flex-start;
    }

    &__navigation-item-link {
      line-height: 1.75rem;
      @include typography.main-font-weight-medium;
    }

    &__navigation-item:last-child &__navigation-item-link {
      border-bottom: none;
    }

    &__navigation-item-contents {
      display: block;
    }

    &__navigation-item-children {
      margin-bottom: spacing.space(1);
      margin-left: spacing.space(1.5);
    }

    &__top-navigation {
      padding-top: spacing.space(0.5);
      padding-bottom: spacing.space(0.5);

      justify-content: flex-start;

      gap: spacing.space(1.5);
    }

    &__top-navigation-link {
      padding: spacing.space(0.25) 0;
    }
  }

  @include media.on-small {
    .tna-logo {
      width: 4rem;
    }

    &__logo-strapline {
      line-height: 1.25rem;
    }

    &__navigation {
      width: calc(100% + #{grid.gutter-width-double()});

      left: -#{grid.gutter-width()};
    }

    &__navigation-item-link {
      padding: spacing.space(0.5) grid.gutter-width();
    }
  }

  @include media.on-tiny {
    .tna-logo {
      width: 3.5rem;
    }

    &__logo-strapline {
      line-height: 1;
    }

    &__navigation-button {
      @include typography.font-size(14);
    }

    &__navigation {
      width: calc(100% + #{grid.gutter-width-tiny-double()});

      left: -#{grid.gutter-width-tiny()};
    }

    &__navigation-item-link {
      padding: spacing.space(0.5) grid.gutter-width-tiny();
    }
  }

  @include colour.on-high-contrast-and-forced-colours {
    @include colour.colour-border("keyline", 1px, solid, bottom);
  }

  @include colour.on-forced-colours {
    &__navigation-button {
      height: auto;

      line-height: 2;
      @include typography.font-size(18);
      @include typography.main-font-weight-bold;

      border: none;
    }

    &__hamburger {
      display: none;
    }
  }
}