@charset 'UTF-8';

// Secondary Nav Accordion Styles.
// ---------------------------------------------------------------------------

.su-secondary-nav--accordion {
  background-color: color(bg, $su-secondary-nav-light-colors);

  .su-secondary-nav__menu {
    background-color: color(bg, $su-secondary-nav-light-colors);
  }

  .su-secondary-nav__link {
    color: color(link, $su-secondary-nav-light-colors);
    border-top: color(divider, $su-secondary-nav-light-colors) solid 1px;

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

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

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

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

  .su-secondary-nav__item--parent {

    > .su-secondary-nav__menu {
      display: none;
    }

    > .su-secondary-nav__link {
      &::after {
        transition: transform 0.3s ease-out;
        background: url("#{$su-image-path}/plus-black.svg") no-repeat 0 0;
        background-size: 100%;
        content: "";
        display: inline-block;
        position: absolute;
        right: 2rem;
        top: calc(50% - 8px);
        height: 1.8rem;
        width: 1.8rem;
      }
    }

    // Show the menu as expanded.
    &.su-secondary-nav__item--expanded {
      > .su-secondary-nav__menu {
        display: flex;
      }

      > .su-secondary-nav__link {
        &::after {
          background: url("#{$su-image-path}/minus-black.svg") no-repeat 0 0;
          transform: rotate(180deg);
          transition: transform 0.3s ease-out;
        }
      }
    }
  }

  .su-secondary-nav__item--current {
    > .su-secondary-nav__link {
      color: color(link--active, $su-secondary-nav-light-colors);

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

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

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

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

  &.no-js {
    .su-secondary-nav__menu {
      display: block;
    }
  }

  .su-secondary-nav__menu-lv2 {
    .su-secondary-nav__link {
      border: 0;
    }
  }
}
