& {
  position: fixed;
  top: 46px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;

  @include min-width($lbaic-settings-wp-breakpoint) {
    top: 32px;
    right: unset;
    left: 36px;
    padding-block: 16px;
    width: calc(100% - 36px);
  }

  @include min-width($lbaic-settings-wp-md-breakpoint) {
    left: var(--content-position-l, 160px);
    width: calc(100% - var(--content-position-l, 160px));
  }
}

.lbaic-settings {
  height: 100%;
  display: grid;
  align-items: start;

  @include max-width($lbaic-settings-wp-breakpoint) {
    grid-template-rows: auto 1fr;
  }

  @include min-width($lbaic-settings-wp-breakpoint) {
    grid-template-columns: 258px 1fr;
    padding-inline: 24px;
  }

  &-content {
    &-container {
      height: 100%;
      max-width: 1000px;
      display: grid;
      align-items: start;
      border-radius: 6px;

      @include min-width($lbaic-settings-wp-breakpoint) {
        width: calc(100% - 92px);
      }
    }
  }

  &-row {
    &-in {
      width: 100%;
      display: flex;
      align-items: center;

      &:not(:last-child):not(:first-child:last-child) {
        padding-block-end: 2px;
      }

      &.gap-8 {
        gap: 8px;
      }
    }
  }

  &-column {
    display: grid;
    gap: 24px;

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

    &-h-42 {
      min-height: 42px;
    }

    &-w-100 {
      width: 100%;
    }

    &-pbe-0 {
      &:not(:last-child) {
        padding-block-end: 0;
      }
    }

    &-mbe-24 {
      &:not(:last-child) {
        margin-block-end: 24px;
      }
    }

    &-wrap {
      display: grid;
      gap: 24px;

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

      @include min-width($lbaic-settings-wp-xl-breakpoint) {
        grid-auto-columns: 1fr;
        grid-template-columns: 1fr 1fr;
      }

      &-in {
        min-width: 0;
      }
    }

    @include min-width($lbaic-settings-wp-xl-breakpoint) {
      grid-auto-columns: 1fr;
      grid-auto-flow: column;
    }

    &-in {
      min-width: 0;

      &:empty {
        @include max-width($lbaic-settings-wp-xl-breakpoint) {
          display: none;
        }
      }

      &-center {
        align-self: center;
      }

      &-pbs {
        &_36 {
          @include min-width($lbaic-settings-wp-xl-breakpoint) {
            padding-block-start: 36px;
          }
        }
      }
    }

    &-align-end {
      display: flex;
      align-items: flex-end;
    }

    &-gap-10 {
      gap: 10px;
    }

    // Means 100px width for first element
    &__f100 {
      @include min-width($lbaic-settings-wp-xl-breakpoint) {
        grid-auto-columns: 100px 1fr;
        grid-auto-flow: column;
      }
    }
  }

  &-divider {
    padding-inline: 24px;
    border-bottom: 1px solid var(--lbaic-settings-content-divider);

    &-gap {
      margin-block-start: 24px;
      margin-block-end: 24px;

      &-start {
        margin-block-start: 24px;
      }

      &-end {
        margin-block-end: 24px;

        &-inner {
          padding-block-end: 24px;
        }
      }

      &-nested {
        &-end {
          margin-block-end: 24px;
        }
      }
    }

    &-no-pi {
      padding-inline: 0;
    }

    &-light {
      border-color: var(--lbaic-settings-content-divider-light);
    }

    &-loading {
      position: relative;
      height: 3px;
      overflow: hidden;
    }

    &-vertical {
      width: 1px;
      height: 32px;
      background-color: var(--lbaic-settings-content-divider);
    }
  }

  &-label {
    display: flex;
    align-items: center;
    margin-inline-end: auto;

    &-in {
      padding-inline-end: 12px;
      margin-inline-end: auto;
      font-size: var(--lbaic-settings-fs-14);
      line-height: var(--lbaic-settings-lh-18);
      font-weight: var(--lbaic-settings-fw-500);
      cursor: pointer;
    }

    &-disabled {
      opacity: .2;
      pointer-events: none;
      cursor: none;
    }
  }

  &-desc {
    &-in {
      font-size: var(--lbaic-settings-desc-in-fs, var(--lbaic-settings-fs-11));
      line-height: var(--lbaic-settings-desc-in-lh, var(--lbaic-settings-lh-14));
      font-weight: var(--lbaic-settings-desc-in-fw, var(--lbaic-settings-fw-400));
      color: var(--lbaic-settings-desc-in-color, var(--lbaic-settings-content-subtitle-color));
      margin-block-start: var(--lbaic-settings-desc-in-mbs, 4px);

      code {
        color: var(--lbaic-settings-desc-code-color);
        background-color: var(--lbaic-settings-desc-code-bg-color);
        border-radius: 4px;
        padding-block: 2px;
        padding-inline: 4px;
        font-size: smaller;
        line-height: inherit;
      }

      a {
        text-decoration: underline;
        color: inherit;
      }
    }
  }

  &-empty {
    width: 100%;
    padding-block: 120px;

    &.sm {
      padding-block: 32px;
    }

    &-in {
      display: grid;
      justify-items: center;
      gap: 16px;
    }

    &-icon {
      width: 64px;
      height: 64px;
      padding: 20px;
      border-radius: 50%;
      background-color: var(--lbaic-settings-content-empty-icon-bg);
    }

    &-i {
      width: 100%;
      height: auto;
      display: block;
      fill: var(--lbaic-settings-content-empty-icon-fill);
    }

    &-desc {
      text-align: center;
    }

    &-title {
      display: block;
      padding-block-end: 2px;
      font-size: var(--lbaic-settings-fs-16);
      font-weight: var(--lbaic-settings-fw-500);
      color: var(--lbaic-settings-content-empty-title-color);
      line-height: var(--lbaic-settings-lh-24);
      text-align: center;
    }

    &-subtitle {
      display: block;
      font-size: var(--lbaic-settings-fs-14);
      color: var(--lbaic-settings-content-empty-subtitle-color);
      line-height: var(--lbaic-settings-lh-24);
      text-align: center;
    }

    &-actions {
      display: flex;
      gap: 12px;

      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        flex-direction: column;
      }

      .lbaic-settings-button-tertiary {
        --lbaic-settings-button-bg: var(--lbaic-settings-select-bg);
        --lbaic-settings-button-tertiary-border: var(--lbaic-settings-select-bg);
        --lbaic-settings-button-tertiary-color: var(--lbaic-settings-select-placeholder-color);
      }
    }
  }

  &-disabled {
    opacity: .3;
    pointer-events: none;
  }

  &-cursor-pointer {
    cursor: pointer;
  }

  &-pointer-none {
    user-select: none;
    pointer-events: none;
  }

  &-pointer {
    cursor: pointer;
  }

  &-extra {
    &-actions {
      display: flex;
      align-items: center;
      justify-content: end;
      margin-block-end: 4px;
    }
  }
}