.lbaic-settings-nav {
  &-list {
    padding-block-start: 16px;

    &-in {

    }
  }

  &-item {
    &:not(:last-child) {
      padding-block-end: 6px;
    }

    &-in {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      padding-block: 8px;
      padding-inline: 8px;
      border-radius: 4px;
      color: var(--lbaic-settings-nav-color);
      background-color: inherit;
      text-decoration: none;
      cursor: pointer;

      &.active {
        background-color: var(--lbaic-settings-nav-item-hover-bg);
        cursor: default;
      }

      &:focus {
        box-shadow: inset 0 0 0 2px var(--lbaic-settings-primary);
      }
    }

    &-i {
      width: 24px;
      flex: 0 0 24px;
      height: auto;
      display: block;
      fill: currentColor;
    }

    &-kb-i {
      fill: none;
      stroke: currentColor;
    }

    &-label {
      min-width: 0;
      flex: 1 0 0;
      display: block;
      padding-inline: 6px;
      font-size: var(--lbaic-settings-fs-14);
      font-weight: var(--lbaic-settings-fw-500);
      line-height: var(--lbaic-settings-lh-20);
      text-align: left;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    &-arrow {
      width: 18px;
      flex: 0 0 18px;
      height: auto;
      display: block;
      margin-inline-start: auto;
      fill: currentColor;
    }

    &.opened {
      .lbaic-settings-nav {
        &-item {
          &-arrow {
            transform: scaleY(-1);
          }
        }

        &-dropdown {
          max-height: unset;
        }
      }
    }
  }

  &-dropdown {
    max-height: 0;
    transition: max-height 480ms ease-in-out;
    overflow: hidden;

    &-in {
      padding-block-start: 8px;
    }

    &-item {
      &:not(:last-child) {
        padding-block-end: 6px;
      }

      &-in {
        width: 100%;
        height: 36px;
        display: flex;
        align-items: center;
        padding-block: 8px;
        padding-inline: 30px 8px;
        border-radius: 4px;
        color: var(--lbaic-settings-nav-color);
        text-decoration: none;

        &:hover {
          background-color: var(--lbaic-settings-nav-item-hover-bg);
        }

        &.active {
          background-color: var(--lbaic-settings-nav-item-hover-bg);
          cursor: default;

          .lbaic-settings-nav-dropdown-item-label {
            font-weight: var(--lbaic-settings-fw-500);
          }
        }
      }

      &-label {
        min-width: 0;
        flex: 1 0 0;
        display: block;
        padding-inline: 6px;
        font-size: var(--lbaic-settings-fs-14);
        line-height: var(--lbaic-settings-lh-20);
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      &-i {
        width: 24px;
        height: auto;
        flex: 0 0 24px;
        fill: currentColor;
      }
    }
  }
}