@use '../../sprite';
@use '../../abstract';

.cds-side-bar-navigation {
  display: inline-block;

  &__list {
    padding: 32px 16px;
    background: var(--gray-700);

    &.simple {
      width: 312px;
    }

    > ul + ul {
      margin-top: 4px;
    }

    > ul .cds-nav-item {
      color: var(--gray-200);
    }

    > ul > li > ul {
      margin-top: 4px;

      .cds-nav-item {
        color: var(--gray-300);

        > * {
          padding-left: 36px;
        }
      }

      .cds-nav-item + .cds-nav-item {
        margin-top: 2px;
      }
    }
  }

  .cds-nav-item.is-active {
    background: var(--gray-500);
  }

  .cds-nav-item.is-new a {
    position: relative;
    align-items: center;

    &::after {
      @include abstract.bg2x-sprite();
      @include abstract.sprite2x(sprite.$ico-new);

      content: '';
    }
  }
}