@charset "UTF-8";

.su-main-nav--light {
  @extend %nav--light;

  @include grid-media-max('md') {
    .su-main-nav__toggle {
      &[aria-expanded="true"] {
        &::before {
          background-color: color(h-border--expanded, $su-nav-colors--light);
        }

        &:hover::before {
          background-color: color(h-border--hover, $su-nav-colors--light);
        }

        &:active::before {
          background-color: color(h-border--active, $su-nav-colors--light);
        }
      }
    }
  }

  @include grid-media-max('md') {
    .su-main-nav__item--parent {
      > a::after {
        background: url("#{$su-image-path}/plus-black.svg") no-repeat 0 0;
        background-size: 100%;
      }

      &.su-main-nav__item--expanded > a {
        &::after {
          background: url("#{$su-image-path}/minus-black.svg") no-repeat 0 0;
          background-size: 100%;
        }

        &:focus::before {
          background-color: color(border--expanded, $su-nav-colors--light);
        }

        &[aria-expanded="true"] {
          &:hover::before {
            background-color: color(border--hover, $su-nav-colors--light);
          }

          &:active::before {
            background-color: color(border--active, $su-nav-colors--light);
          }
        }
      }
    }

    .su-main-nav__item--current {
      &.su-main-nav__item--expanded {
        > a {
          color: color(link--expanded, $su-nav-colors--light);

          &::before,
          &:focus::before {
            background-color: color(border--active-expanded, $su-nav-colors--light);
          }

          &[aria-expanded="true"]:active {
            color: color(link--active, $su-nav-colors--light);
          }
        }
      }
    }
  }

  // desktop first level menu style override
  @include grid-media('lg') {
    > ul {
      background-color: transparent;

      > li {
        > a {
          &:hover,
          &:focus {
            color: color(h-link--hover, $su-nav-colors--light);

            &::before {
              background-color: color(h-border--hover, $su-nav-colors--light);
            }
          }

          &:active {
            color: color(h-link--active, $su-nav-colors--light);

            &::before {
              background-color: color(h-border--active, $su-nav-colors--light);
            }
          }

          &[aria-expanded="true"] {
            color: color(h-link--expanded, $su-nav-colors--light);

            &::before {
              background-color: color(h-border--expanded, $su-nav-colors--light);
            }

            &:hover {
              color: color(h-link--hover, $su-nav-colors--light);

              &::before {
                background-color: color(h-border--hover, $su-nav-colors--light);
              }
            }

            &:focus {
              &::before {
                background-color: color(h-border--expanded, $su-nav-colors--light);
              }
            }

            &:active {
              color: color(h-link--active, $su-nav-colors--light);
            }
          }
        }
      }

      > .su-main-nav__item--current {
        > a {
          color: color(h-link--active, $su-nav-colors--light);

          &::before {
            background-color: color(h-border--current, $su-nav-colors--light);
          }

          &:hover,
          &:focus {
            color: color(h-link--hover, $su-nav-colors--light);

            &::before {
              background-color: color(h-border--hover, $su-nav-colors--light);
            }
          }

          &:active {
            color: color(h-link--active, $su-nav-colors--light);

            &::before {
              background-color: color(h-border--active, $su-nav-colors--light);
            }
          }
        }

        &.su-main-nav__item--expanded {
          > a:focus {
            color: color(h-link--expanded, $su-nav-colors--light);

            &::before {
              background-color: color(h-border--expanded, $su-nav-colors--light);
            }
          }

          > a[aria-expanded="true"] {
            &::before {
              background-color: color(h-border--expanded, $su-nav-colors--light);
            }

            &:hover {
              color: color(h-link--hover, $su-nav-colors--light);

              &::before {
                background-color: color(h-border--hover, $su-nav-colors--light);
              }
            }

            &:active {
              color: color(h-link--active, $su-nav-colors--light);

              &::before {
                background-color: color(h-border--active, $su-nav-colors--light);
              }
            }

          }
        }
      }
    }
  }

  &.su-main-nav--mobile-search {
    .su-main-nav__toggle[aria-expanded="true"] {
      @include grid-media-max('md') {
        + .su-main-nav__menu-lv1 + .su-site-search {
          background-color: color(bg, $su-nav-colors--light);
        }
      }
    }
  }
}
