@charset "UTF-8";

.su-main-nav--dark {
  @include grid-media-max('md') {
    .su-main-nav__toggle {
      color: color(h-link, $su-nav-colors--dark);

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

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

      &::after {
        background: url("#{$su-image-path}/hamburger-white.svg") no-repeat 3px 0;
      }

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

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

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

        &::after {
          background: url("#{$su-image-path}/close-white.svg") no-repeat 3px 0;
          background-size: 16px 16px;
        }
      }
    }
  }

  // desktop first level menu style override
  @include grid-media('lg') {
    > ul {
      > li {
        > a {
          color: color(h-link, $su-nav-colors--dark);

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

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

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

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

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

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

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

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

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

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

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

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

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

      > .su-main-nav__item--expanded {
        &,
        &.su-main-nav__item--current {
          > a,
          > a:focus {
            &::before {
              background-color: color(h-border--expanded, $su-nav-colors--dark);
            }
          }
        }

        &.su-main-nav__item--current {
          > a {
            &[aria-expanded="true"] {
              &:active::before {
                background-color: color(h-border--expanded-active, $su-nav-colors--dark);
              }
            }
          }
        }

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

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