@use '../../../01-core' as *;

.uw-horizontal-nav.uw-horizontal-nav--header {
  background-color: var(--uw-black);
  max-width: inherit;
  width: inherit;

  .uw-horizontal-nav--wrapper{
    background-color: var(--uw-black);
    display: block;
    max-width: inherit;
    padding: 0;
    position: relative;
  }
  .uw-horizontal-nav--home{
    display: none;
    grid-column: none;
    padding: 0;
  }
  .uw-horizontal-nav--menu {
    width: inherit;
    .menu {
      border: var(--size-xs) solid var(--uw-white);
      height: auto;
      position: relative;
      width: var(--size-12);
      a{
        color: var(--uw-white);
        line-height: 1.25rem;
        outline: none;
        outline-offset: unset;
        width: 100%;
        &:hover{
          color: var(--uw-black);
        }
      }
      &.menu__subnav{
        a{
          color: var(--uw-black);
          outline: none;
          outline-offset: unset;
          width: 100%;
        }
      }
      &--horizontal {
        > .menu__item{
          background-color: var(--uw-black);
          border-bottom: 0 solid transparent;
          width: 100%;
          &.has-submenu {
            > a{
              padding-right: var(--size-3);
              position: relative;
              &::after {
                @include svg-background(mobile-arrow-down-w);
                background-position: center center; // LTR
                background-repeat: no-repeat;
                background-size: contain;
                display: block;
                height: 0.6rem;
                position: absolute;
                text-align: center;
                width: 0.6rem;
              }
              &:hover,
              &:focus{
                &::after {
                  @include svg-background(mobile-arrow-down);
                }
              }
            }
            &.submenu-active{
              > a{
                &::after {
                  @include svg-background(mobile-arrow-down);
                }
              }
            }
          }
          .no-scroll & {
            &[aria-expanded="true"]{
              > a{
                border-left: inherit;
                display: inline-block;
                height: inherit;
                overflow: inherit;
                width: inherit;
                z-index: var(--layer-overlay);
                span{
                  display: block;
                }
                &::after {
                  //transform: scale(0.75, 0.75) rotate(270deg);
                }
              }
            }
          }
        }
      }
      &__subnav {
        display: none;
      }
      .submenu-active .menu__subnav{
        background: #f7f7f7;
        border-width: 0;
        column-count: 1;
        display: inherit;
        height: auto;
        left: inherit;
        min-height: auto;
        min-width: 13rem;
        padding: var(--size-2) var(--size-1);
        right: 0;
        top: inherit;
        width: auto;

        .menu__item{
          max-width: inherit;
          &-parent{
            display: none;
          }
          a{
            .no-scroll &{
              border-color: transparent;
              &:hover{
                border-color: #e6e6e6;
              }
            }
          }
        }
        .menu__subnav{
          border: 0 solid var(--uw-white);
        }
      }
    }
  }
}