.lbaic-settings-tab {
  position: relative;
  flex: 0 0 auto;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 10px;
  background-color: transparent;
  border: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  color: var(--lbaic-settings-tab-color);
  text-decoration: none;
  cursor: pointer;

  &:not(:last-child) {
    margin-inline-end: 7px;
  }

  &:hover {
    background-color: var(--lbaic-settings-tab-hover-color);
  }

  &:before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: var(--lbaic-settings-tab-active-border);
    border-radius: 2px 2px 0 0;
    opacity: 0;
  }

  &-i {
    width: 18px;
    height: auto;
    flex: 0 0 18px;
    display: block;
    margin-inline-end: 8px;
  }

  &-label {
    font-size: var(--lbaic-settings-fs-14);
    font-weight: var(--lbaic-settings-fw-400);
    color: inherit;
  }

  &:focus {
    box-shadow: none;
  }

  &-icon {
    &.default {
      display: block;
      fill: var(--lbaic-settings-tab-default-fill);

      &.stroke {
        stroke: var(--lbaic-settings-tab-default-fill);
      }
    }

    &.active {
      display: none;
      fill: var(--lbaic-settings-tab-active-fill);

      &.stroke {
        stroke: var(--lbaic-settings-tab-active-fill);
      }
    }

    &.no-fill {
      fill: none;
    }
  }

  &.active {
    color: var(--lbaic-settings-tab-active-color);
    pointer-events: none;

    .lbaic-settings-tab-icon {
      &.default {
        display: none;
      }

      &.active {
        display: block;
      }
    }

    &:before {
      opacity: 1;
    }
  }

  &-group {
    width: 100%;
    display: flex;
  }

  &-arrows {
    position: absolute;
    top: 0;
    right: var(--lbaic-settings-tab-arrow-right, unset);
    bottom: 0;
    left: var(--lbaic-settings-tab-arrow-left, unset);
    width: 24px;
    height: 100%;
    flex: 0 0 24px;
    display: flex;
    background-image: linear-gradient(
                    var(--lbaic-settings-tab-gradient-position, to left),
                    var(--lbaic-settings-tab-arrow-bg),
                    var(--lbaic-settings-white)
    );
    box-shadow: var(--lbaic-settings-tab-arrow-box-shadow, none);
    opacity: 1;
    transition: opacity 300ms ease;
    cursor: pointer;
    z-index: 1;

    &-i {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      margin: auto;
      stroke: var(--lbaic-settings-tab-arrow-stroke);
    }

    &.backward {
      --lbaic-settings-tab-arrow-left: 0;
      --lbaic-settings-tab-gradient-position: to left;
      --lbaic-settings-tab-arrow-box-shadow: 2px 0 4px 0 rgba(var(--lbaic-settings-black-rgb), 0.06);

      border-top-right-radius: 4px;

      .lbaic-settings-tab-arrows-i {
        transform: scaleX(-1);
      }
    }

    &.forward {
      --lbaic-settings-tab-arrow-right: 0;
      --lbaic-settings-tab-arrow-box-shadow: -2px 0 4px 0 rgba(var(--lbaic-settings-black-rgb), 0.06);
      --lbaic-settings-tab-gradient-position: to right;

      border-top-left-radius: 4px;
    }

    &:hover {
      background-image: linear-gradient(
                      var(--lbaic-settings-tab-gradient-position),
                      var(--lbaic-settings-tab-arrow-bg-hover),
                      var(--lbaic-settings-white)
      );
    }

    &:active {
      .lbaic-settings-tab-arrows-i {
        stroke: var(--lbaic-settings-tab-arrow-stroke-active);
      }
    }

    &.hide {
      opacity: 0;
    }
  }

  &-nested {
    padding-inline: unset;

    &:not(:last-child) {
      margin-inline-end: 14px;
    }

    &:hover {
      background-color: transparent;
    }

    &-label {
      font-size: var(--lbaic-settings-fs-12);

      &:hover {
        color: var(--lbaic-settings-primary);
      }
    }
  }

  .lbaic-settings-badge {
    margin-inline-start: 8px;
  }
}

