fleet/frontend/components/side_panels/SiteNavSidePanel/_styles.scss

.site-nav-item {
  position: relative;
  margin: 15px 0;

  &__icon {
    position: relative;
    font-size: $large;
    margin-right: $pad-medium;
    vertical-align: sub;

    @at-root .site-nav--small & {
      display: block;
      text-align: center;
      margin-right: 0;
      line-height: 40px;
    }

    @include breakpoint(smalldesk) {
      display: block;
      text-align: center;
      margin-right: 0;
      line-height: 40px;
    }
  }

  &__name {
    text-decoration: none;
    vertical-align: middle;
    font-weight: $normal;
    font-size: 14px;

    @at-root .site-nav--small & {
      display: none;
    }

    @include breakpoint(smalldesk) {
      display: none;
    }
  }

  &__button {
    transition: color 200ms ease-in-out;
    line-height: 40px;
    position: relative;
    color: $text-dark;
    cursor: pointer;
    font-size: $small;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0 $pad-medium;
    text-align: left;

    &:hover {
      color: $text-dark;
    }

    @at-root .site-nav--small & {
      height: 50px;
    }

    @include breakpoint(smalldesk) {
      height: 50px;
    }
  }

  &--active {
    .site-nav-item__button {
      color: $brand;
      border-bottom: 0;

      &:hover {
        color: $brand-dark;
      }

      &::before {
        @include position(absolute, 0 null null 0);
        content: '';
        width: 6px;
        height: 55px;
        background-color: $brand;
        z-index: 1;
      }

      @at-root .site-nav--small & {
        border-bottom: 6px solid $brand;
        border-left: 6px solid $brand;
        padding: 0;
        border-radius: 0;

        &::before {
          display: none;
        }
      }

      @include breakpoint(smalldesk) {
        border-bottom: 6px solid $brand;
        border-left: 6px solid $brand;
        padding: 0;
        border-radius: 0;

        &::before {
          display: none;
        }
      }
    }

    .site-nav-item__icon {
      @at-root .site-nav--small & {
        transform: translate(-2px, 3px);
      }

      @include breakpoint(smalldesk) {
        transform: translate(-2px, 3px);
      }
    }



    &.site-nav-item--single {
      .site-nav-item__button {
        &::before {
          height: 41px;
        }
      }
    }
  }

  &:last-child {
    border-top: 1px solid $accent-light;
    padding-top: 15px;

    @at-root .site-nav--small & {
      margin-right: 0;
    }

    @include breakpoint(smalldesk) {
      margin-right: 0;
    }
  }
}

.site-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-sub-item {
  position: relative;
  cursor: pointer;
  margin: 0;
  text-transform: none;

  &--active {
    .site-sub-item__button {
      color: $white;
      font-size: 13px;
      font-weight: $bold;

      &:hover {
        color: $white;
      }
    }

    &::before {
      @include size(7px);
      content: '';
      display: block;
      border-radius: 50%;
      background-color: $white;
      position: absolute;
      left: 45px;
      top: 50%;
      margin: -3px 0 0 -4px;

      @at-root .site-nav--small & {
        display: none;
      }

      @include breakpoint(smalldesk) {
        display: none;
      }
    }
  }

  &__button {
    transition: color 150ms ease-in-out;
    color: rgba($white, 0.75);
    text-transform: none;
    cursor: pointer;
    padding: 9px 0 9px 60px;
    font-size: 13px;
    font-weight: $light;
    width: 100%;
    text-align: left;

    &:hover {
      color: rgba($white, 0.9);
    }

    @at-root .site-nav--small & {
      text-align: center;
      padding: 3px 0 9px;
      height: 44px;
    }

    @include breakpoint(smalldesk) {
      text-align: center;
      padding: 3px 0 9px;
      height: 44px;
    }
  }

  &__link {
    transition: font-size 200ms ease-in-out;
    font-size: 14px;

    &--active {
      text-decoration: none;
      text-transform: none;
    }
  }

  &__name {
    @at-root .site-nav--small & {
      display: none;
    }

    @include breakpoint(desktop) {
      display: inline-block;
    }

    @include breakpoint(smalldesk) {
      display: none;
    }
  }

  &__icon {
    @at-root .site-nav--small & {
      display: inline-block;
      font-size: 25px;

      .kolidecon {
        vertical-align: 1px;
      }
    }

    @include breakpoint(desktop) {
      display: none;
    }

    @include breakpoint(smalldesk) {
      display: inline-block;
      font-size: 25px;

      .kolidecon {
        vertical-align: 1px;
      }
    }
  }

  &:first-child {
    @at-root .site-nav--small & {
      display: none;
    }

    @include breakpoint(smalldesk) {
      display: none;
    }
  }
}

.site-sub-items {
  transition: width 100ms ease-in-out;
  background-color: $brand;
  font-size: 13px;
  margin: 0;
  padding: 0;
  position: relative;

  @at-root .site-nav--small & {
    background-color: $brand 18%;
    background-image: linear-gradient(to bottom, $brand 18%, $brand 82%);
    box-shadow: none;
  }

  @include breakpoint(smalldesk) {
    background-color: $brand 18%;
    background-image: linear-gradient(to bottom, $brand 18%, $brand 82%);
    box-shadow: none;
  }

  &__list {
    padding: 12px 0;
    margin: 0;

    @at-root .site-nav--small & {
      padding: 0;
      text-align: center;
      width: 100%;
    }

    @include breakpoint(smalldesk) {
      padding: 0;
      text-align: center;
      width: 100%;
    }

    &--expanded {
      @at-root .site-nav--small & {
        display: inline-block;
      }

      @include breakpoint(smalldesk) {
        display: inline-block;
      }
    }
  }
}

.collapse-sub-item {
  bottom: 0;
  color: $white;
  cursor: pointer;
  line-height: 95px;
  position: absolute;
  right: 4px;
  top: 0;

  @include breakpoint(gtsmalldesk) {
    display: none;
  }
}