@use "../../config" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../breakpoint" as *;
@use "../../spacing" as *;
@use "../../motion" as *;
@use "../../utilities/box-shadow" as *;
@use "../../utilities/component-reset";
@use "../../utilities/convert" as *;
@use "../../utilities/focus-outline" as *;
@use "../../utilities/rtl" as *;
@use "../../utilities/high-contrast-mode" as *;
@use "../../utilities/z-index" as *;
@use 'sass:color';

@import "../form";

/// @type Number
/// @access public
/// @group main-navigation
$main-navigation-width: 100%;

/// @type Number
/// @access public
/// @group main-navigation
$main-navigation-height: calcRem(60px);

/// @type Number
/// @access public
/// @group main-navigation
$main-navigation-inline-height: $main-navigation-height;

/// @type Number
/// @access public
/// @group main-navigation
$main-navigation-menu-width: calcRem(300px);

/// List box styles
/// @access public
/// @group main-navigation
@mixin main-navigation {
  .#{$prefix}--main-navigation {
    color: $action-default-link-default;
    background: $background-main;
    height: $main-navigation-height;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
    @include reset;
    @media print {
      display: none;
    }
    // @include font-smoothing;
  }

  .#{$prefix}--main-navigation--line {
    border-top: 12px solid #0d295c;
  }

  .#{$prefix}--main-navigation__sub {
    display: none;
  }

  .#{$prefix}--main-navigation {
    .#{$prefix}--main-navigation__trigger {
      color: $action-default-link-default;
      cursor: pointer;
      user-select: none;
      display: flex;
      align-items: center;
      @include breakpoint-down("md") {
        width: 100%;
        justify-content: space-between;
      }
      // justify-content: center; // TODO: Check if needed
      white-space: nowrap;

      > a {
        color: $action-default-link-default; // TODO change to $link_on_color token
        @include type-style("body-short-02");
        text-decoration: none;
        &.active {
          border-bottom: 3px solid rgba(var(--ui-01), 0.5);
        }
        &:hover,
        &:visited,
        &:active {
          color: $action-default-link-default;
          text-decoration: underline;
        }
        &:focus {
          color: $action-default-link-default;
        }
      }
    }
  }

  .#{$prefix}--main-navigation__trigger--has-sub {
    display: flex;
    align-items: center;
    > div,
    > a,
    > span {
      white-space: nowrap;
      // padding-left: 0.3em;
      // padding-right: 0.3em;
    }
  }

  .#{$prefix}--main-navigation__trigger__icon {
    display: inline-block;
    position: relative;
    top: calcRem(0px);
    //vertical-align: middle;
    margin-left: 0.3em;
    font-size: 0.8em;
    margin-right: $spacing-05;
    flex-shrink: 0;

    @include rtl {
      margin-left: 0;
      margin-right: 0.3em;
    }
  }

  .#{$prefix}--main-navigation__trigger--has-sub.#{$prefix}--main-navigation__trigger--open {
    .#{$prefix}--main-navigation__trigger__icon {
      //top: calcRem(0px);
      //transform: scale(1.1);
    }
  }

  .#{$prefix}--main-navigation__logo {
    a {
      color: $action-default-link-default;
      text-decoration: none;
      text-transform: uppercase;
      &:hover,
      &:visited,
      &:active {
        color: $action-default-link-default;
        text-decoration: underline;
      }
      &:focus {
        color: $text-body-default;
      }
    }
  }

  @include breakpoint-down("md") {
    .#{$prefix}--main-navigation__wrapper {
      padding: 0;
    }
  }

  .#{$prefix}--main-navigation__logo__default {
    display: flex;
    height: 100%;
    align-items: center;
    .#{$prefix}--main-navigation__logo__default__ribbon {
      background: $brand-main;
      align-self: flex-start;
      margin-right: 0.5em;
      width: 3.1rem;
      @include breakpoint-up("md") {
        width: 4.7rem;
      }
      //position: absolute;
      //top: 0;
      z-index: 100000;
      padding: 0.3em 0em;
    }

    svg {
      margin: 0 -0.2em;
      width: calc(100% + 0.4em);
      height: auto;
      fill: $brand-inverse; // TODO: Always use color instead
    }
  }
  .#{$prefix}--main-navigation__logo-wrapper {
    // display: flex;
    align-self: flex-start;
    height: 100%;
    flex-grow: 1;
  }

  .#{$prefix}--main-navigation__logo {
    display: flex;
    flex-grow: 1;
    font-weight: 600;
    white-space: nowrap;
    height: 100%;
  }

  .#{$prefix}--main-navigation__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    height: 100%;
    width: 100%;
  }

  .#{$prefix}--main-navigation__button {
    display: none !important;
    @include breakpoint-down("md") {
      display: block !important;
    }
  }

  .#{$prefix}--main-navigation--line {
    .#{$prefix}--main-navigation__logo__default__ribbon {
      margin-top: -12px;
    }
  }

  .#{$prefix}--main-navigation__logo__offShelf {
    margin-right: 0.5em;
    height: $main-navigation-height;
    display: flex;
    align-items: center;
    justify-content: center;
    //padding: 0.5em 0em;
    svg {
      font-size: 6.5em;
      fill: $brand-main; // TODO: Always use color instead
    }
  }
  .#{$prefix}--main-navigation__list {
    display: flex;
    justify-content: flex-end;
    height: calcRem(55px);
    align-items: center;
  }

  .#{$prefix}--main-navigation__item {
    @include breakpoint-down("md") {
      width: 100%;
    }
    @include breakpoint-up("md") {
      padding: 0 $spacing-04;
    }
    @include type-style("body-short-02");
    @include font-family("sans");
    font-weight: 600;

    &:last-child {
      padding-right: 0;
    }

    // Relate the sub navigation dropdown to the parent navigation item
    &.#{$prefix}--content-width {
      position: relative;

      // Get the width from its navigation content
      & > .#{$prefix}--main-navigation__sub--open {
        left: inherit;
        min-width: 100%;
        right: 0;
        top: 2.5rem;
        width: auto;
      }
    }
  }

  .#{$prefix}--main-navigation__sub--open {
    display: block;
    color: $text-body-default;
    background: $background-main;
  }

  @include breakpoint-down("md") {
    .#{$prefix}--main-navigation__sub--open {
      background: $layer-primary;
    }
  }
  @include breakpoint-up("md") {
    .#{$prefix}--main-navigation__sub--open {
      display: block;
      position: absolute;
      top: calcRem(55px);
      right: 0;
      width: 80%;
      max-height: 80vh;
      overflow: auto;
      overflow-x: hidden;
      z-index: z("modal");
      color: $text-body-default; // TODO: Replace
      background: $background-main;
      box-shadow: 
          color.change(color.adjust(#0b77c2, $saturation: -50%), $alpha:0.15) 0 3px 12px,
          color.change(color.adjust(#0b77c2, $saturation: -40%), $alpha:0.15) 0 32px 78px;

      .#{$prefix}--theme-dark & {
        box-shadow: var(--modal-background-01) 0 3px 12px,
          //TODO - create token for this color
          var(--modal-background-01) 0 32px 78px;
      }
      .#{$prefix}--main-navigation__user & {
        left: inherit;
        right: 0;
        width: 25%;
        min-width: 250px;
        @include rtl {
          left: 0;
          right: inherit;
        }
      }
    }
    .#{$prefix}--main-navigation__sub--callout {
      left: inherit;
      right: inherit;
      width: inherit;
      margin-left: -0.9em;
    }
  }

  .#{$prefix}--main-navigation__logo-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    //  height: calcRem(55px);
    flex-direction: row-reverse;
    justify-content: space-between;
    // padding: 0 $spacing-03 0 $spacing-05;
  }

  @include breakpoint-down("md") {
    .#{$prefix}--main-navigation__logo {
      font-weight: 600;
    }

    .#{$prefix}--main-navigation__list {
      display: none;
      background: $background-main;
    }

    .#{$prefix}--main-navigation__list--open {
      position: absolute;
      top: calcRem(61px);
      left: 0;
      right: 0;
      display: flex;
      width: 100%;
      height: auto;
      flex-direction: column;
      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);
    }

    .#{$prefix}--main-navigation__trigger {
      justify-content: flex-start;

      > :nth-child(1) {
        // display: block;
        // width: 100%;
        padding: $spacing-05 1em;
      }
      // padding: $spacing-05 1em;
      //background-color: #005e8d; // TODO create a token for this color
      //border-bottom: 1px solid lighten(#085387, 5); //TODO create color in figma
    }
  }
}