@import (reference) '../../common/variables.less';

eak-sidebar {
  .sidebar-nav-secondary-list {
    padding: 2px 0;
  }

  .sidebar-nav-secondary-item {
    display: block;
    position: relative;
    padding: 6px 0 6px 25px;
    @media @sm {
      padding-left: 36px;
    }
    @media @md-xl {
      padding-left: 26px;
    }

    &.active,
    & .sidebar-nav-item-heading.active {
      font-weight: 700;
      color: @nav-accent;
    }

    & .sidebar-nav-item-heading.active + .sidebar-nav-secondary {
      color: @nav-accent;
    }

    &.active::before {
      content: '';
      position: absolute;
      top: 0;
      left: 1px;
      height: 100%;
      border-left: 3px solid @nav-accent;
    }
  }

  .sidebar-nav-secondary-item:not(.sidebar-secondary-nav-item-children) {
    padding-right: 40px;
  }

  .sidebar-nav-secondary-item.sidebar-secondary-nav-item-children {
    padding-left: 0;

    padding-top: 0;
    padding-bottom: 0;

    .sidebar-nav-secondary .sidebar-nav-secondary-list .sidebar-nav-item-trigger {
      padding-left: 13px;
      @media @sm-md {
        padding-left: 15px;
      }
    }

    .sidebar-nav-secondary-item:not(.sidebar-secondary-nav-item-children) {
      padding-left: 38px;
      @media @sm-md {
        padding-left: 51px;
      }
      @media @md-xl {
        padding-left: 39px;
      }
    }

    .sidebar-nav-secondary-item.sidebar-secondary-nav-item-children {
      .sidebar-nav-secondary-item:not(.sidebar-secondary-nav-item-children) {
        padding-left: 51px;
        @media @sm-md {
          padding-left: 64px;
        }
        @media @md-xl {
          padding-left: 52px;
        }
      }
    }
  }

  .sidebar-nav-secondary-link {
    display: block;
    text-decoration: none;
    color: inherit;

    &:hover {
      color: @nav-hover;
    }
  }
}
