@use "00-base/configure" as *;

.ma__organization-navigation {

  &__items {
    position: relative;
    padding: 0 20px;
    margin-bottom: 0;
    order: 2;

    @media ($bp-large-min) {
      order: 1;
      display: flex;
      padding: 0;
      border-bottom: 0;
      position: static;
    }
  }

  &__item {
    list-style: none;

    @media ($bp-large-min) {
      padding: 0 10px;
    }

    @media ($bp-large-extended-min) {
      padding: 0 20px;
    }

    &.has-subnav {
      background-color: transparent;
      box-shadow: 0;
      transition: 0.8s ease-out;

      button {

        @include ma-chevron;

        &::after {
          float: right;
          border-color: $c-primary-alt;
          transition: 0.5s ease-out;

          @media ($bp-large-min) {
            transform: translateY(20%) rotate(45deg);
          }
        }
      }
    }

    &.item-open {

      @media ($bp-large-max) {

        .subnav-toggle::before {
          content: "back";
          float: right;
          padding-left: 10px;
        }

        .subnav-toggle::after {
          transform: translateY(-30%) rotate(135deg);
          transition: 0.5s ease-out;
        }
      }

      @media ($bp-large-min) {
        background-color: $c-white;
        transition: 0.5s ease-out;
        box-shadow: 0 0.25rem 0.5rem rgba($c-black, 0.25);
      }
    }

    .subnav-toggle,
    .internal-link {
      width: 100%;
      display: block;
      text-align: left;
      border: 0;
      background-color: transparent;
      padding: 1rem 0;
      font-weight: $fonts-bold;
      font-size: $fonts-xsmall;
      color: $c-black;

      &.section-toggle {
        background-color: $c-gray-lightest;
        padding: 1rem 20px;
      }

      @media ($bp-large-max) {
        text-transform: uppercase;
      }

      @media ($bp-large-min) {
        height: 100%;
        font-size: $fonts-smaller;
      }
    }
  }

  &__item.mobileLogin {
    border-top: 1px solid $c-gray-light;

    @media ($bp-large-min) {
      display: none;
    }

    .ma__contact-group {
      display: flex;
      margin-top: 20px;

      &__name {
        display: inline-block;

        span {
          display: none;
        }
      }
    }
  }

  &__subitems {
    -ms-overflow-style: none;

    @media ($bp-large-max) {
      height: 200vh;
      width: 100%;
      overflow-y: auto;
      position: absolute;
      top: 0;
      right: -100vw;
      transition: right 0.5s ease;
      z-index: $z-dropdown;
      background-color: $c-white;

      .item-open & {
        right: 0;
      }
    }

    @media ($bp-large-min) {
      position: absolute;
      left: 0;
      max-height: 0;
      top: -100vh;
      overflow-y: hidden;
      transition: 0.2s ease-in-out;
      width: auto;
      max-width: 100%;
      background-color: $c-white;
      box-shadow: 0 0.25rem 0.5rem rgba($c-black, 0.25);
      z-index: 0;

      .item-open & {
        max-height: 100vh;
        transition: max-height 0.6s ease-in-out;
        z-index: $z-dropdown;
      }
    }
  }



  &__subitem {
    padding: 0 20px;

    @media ($bp-large-min) {
      padding: 20px;
    }

    .ma__comp-heading {

      @include ma-h4;
    }
  }
}

.ma__org-nav-i-want-to {

  @media ($bp-large-min) {
    display: flex;
  }

  .ma__comp-heading {

    @media ($bp-large-max) {
      font-size: $fonts-medium;
      font-weight: $fonts-normal;
      color: $c-primary;
      margin-bottom: 0;
      padding-bottom: 1rem;

      &::after {
        display: none;
      }

      &::before {
        content: $close-icon;
        font-size: $fonts-2xlarge;
        font-weight: 200;
        line-height: 0;
        position: absolute;
        top: 35%;
        right: 0;
        transform: translate(-50%, -50%) rotate(135deg);
        transition: 0.2s ease-out;
      }

      &.item-open::before {
        transform: translate(-50%, -50%) rotate(90deg);
      }
    }
  }

  &-section {

    &.item-open {
      display: block;
    }

    @media ($bp-large-max) {
      padding-top: 20px;

      &:not(:last-child) {
        border-bottom: 1px solid $c-gray-light;
      }
    }

    @media ($bp-large-min) {

      @include ma-auto-size(1, 3);

      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        flex: 1 1 auto;
      }

      @supports not (-ms-high-contrast: none) {
        flex-grow: 1;
        flex-basis: 0;
      }

      &:not(:first-child) {
        border-left: 1px solid $c-gray-light;
        border-top: 0;
        padding-left: 2.125rem;
      }

      &:not(:last-child) {
        padding-right: 2.125rem;
      }
    }

    .ma__link-list__container {
      display: none;

      &.item-open {
        display: block;
        padding-left: 1.35rem;
        border-top: 1px solid $c-gray-light;
      }

      @media ($bp-large-min) {
        display: block;
      }
    }

    .ma__link-list__container a {

      @media ($bp-large-max) {
        font-size: $fonts-medium;
        font-weight: $fonts-normal;
      }
    }

    .ma__link-list__see-all {
      margin-top: 0;
      padding-left: 1.35rem;
      display: none;

      &.item-open {
        display: inline-block;
        padding-bottom: 0.5rem;
      }

      @media ($bp-large-min) {
        display: inline-block;
        font-weight: $fonts-bold;
        background-color: $c-white;
        outline: 3px solid rgba($c-primary, 0.5);
        padding: 0.2rem 0.5rem;
        margin-top: 1rem;
        transition: all 0.4s ease;

        &:hover {
          cursor: pointer;
          background-color: $c-primary;
          outline: 3px solid $c-primary;

          a {
            color: $c-white;

            svg {
              fill: $c-white;
            }
          }
        }
      }

      .ma__decorative-link {

        @media ($bp-large-min) {
          width: auto;
        }

        a {
          display: block;
          white-space: nowrap;

          @media ($bp-large-max) {
            font-size: $fonts-medium;
            font-weight: $fonts-normal;
          }

          @media ($bp-large-min) {

            &:hover {
              border-bottom-color: transparent;
            }
          }
        }
      }
    }
  }
}

.ma__org-nav-contact-us {
  position: absolute;
  height: 115%;
  width: 100%;

  .ma__comp-heading {

    @media ($bp-large-min) {
      white-space: nowrap;
    }
  }

  @media ($bp-large-min) {
    position: static;
    height: auto;
    overflow: auto;
  }
}

.ma__org-nav-contact-us__contact-row {
  padding-top: 20px;
  width: 100%;

  @media ($bp-large-min) {
    padding-top: 1px;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }

  .ma__contact-row__additional {

    @media ($bp-large-min) {
      width: 100%;
      display: flex;
    }
  }

  .ma__comp-heading {
    display: none;

    @media ($bp-large-min) {
      display: block;
    }
  }

  .wrappedGroup {

    @media ($bp-large-min) {
      display: flex;
      flex-direction: column;

      @include ma-auto-size(1, 3);

      &:not(:first-child) {
        border-left: 1px solid $c-gray-light;
        padding-left: 2.125rem;
      }

      &:not(:last-child) {
        padding-right: 2.125rem;
      }

      @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        flex: 1 1 auto;
      }

      @supports not (-ms-high-contrast: none) {
        flex-grow: 1;
        flex-basis: 0;
        max-width: 50%;
        min-width: 33%;
      }
    }
  }

  .ma__contact-group:not(:first-child),
  .ma__contact-group:first-child:not(:last-child) {
    // these styles are defined multiple places for page level contact groups

    @media ($bp-medium-min) {
      width: auto !important;
      margin-left: 0 !important;
      border-left: 0 !important;
      padding-left: 0 !important;
      float: none !important;
    }
  }
}

.ma__org-nav-contact-us__custom-options {
  border-top: 1px solid $c-gray-light;
  display: flex;
  flex-direction: column;

  @media ($bp-large-min) {
    flex-direction: row;
  }

  .custom-option-item {
    margin-top: 1rem;
    padding-top: 1rem;

    @media ($bp-large-min) {
      flex-grow: 1;
      flex-basis: 0;
      max-width: 33%;

      @include ma-auto-size(1, 3);

      &:not(:first-child) {
        border-left: 1px solid $c-gray-light;
        padding-left: 2.125rem;
      }

      &:not(:last-child) {
        padding-right: 2.125rem;
      }
    }

    a {
      font-size: $fonts-small;
    }
  }

  .ma__decorative-link {
    line-height: 1.1;
    padding-bottom: 0.7rem;
  }

  .custom-option-item__label {
    white-space: nowrap;
    display: inline-block;
    width: 100%;
    font-weight: $fonts-bold;
  }

  .custom-option-item__label svg {
    width: 20px;
    height: 20px;
    fill: $c-primary-alt;
  }
}

// IE hacks
/* stylelint-disable selector-type-no-unknown */

_:-ms-lang(x), .ma__org-nav-contact-us__contact-row .wrappedGroup {
  flex: 1 1 auto;
}

_:-ms-lang(x), .ma__org-nav-i-want-to .ma__org-nav-i-want-to-section {
  flex: 1 1 auto;
}