.lbaic-settings-cb-cl {
  &-column {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;

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

    &-in {
      width: 100%;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 20px;

      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        gap: 10px;
      }

    }
  }

  &-table {
    --lbaic-settings-input-local-bg: var(--lbaic-settings-table-accordion-content-bg);
    --lbaic-settings-dropdown-local-bg: var(--lbaic-settings-table-accordion-content-bg);
    --lbaic-settings-contenteditable-local-bg: var(--lbaic-settings-table-accordion-content-bg);

    &-overflow {
      @include max-width($lbaic-settings-wp-breakpoint) {
        .lbaic-settings-e-oaiu-table-content {
          position: sticky;
          top: 0;
          left: 0;
          max-width: calc(100vw - 32px);
        }
      }
    }

    &-summary {
      cursor: pointer;
    }

    &-details {
      position: relative;
    }

    &-item {
      display: flex;
      align-items: center;
    }

    &-checked {
      &-i {
        width: 24px;
        height: auto;
        display: block;
        margin-inline-start: auto;
        fill: var(--lbaic-settings-primary);
      }
    }
  }

  &-ct {
    &-toggle {
      width: 100%;

      &-in {
        --lbaic-settings-cb-cl-p: 4px;
        --lbaic-settings-cb-cl-content-bg: var(--lbaic-settings-cb-cl-ct-field-bg);
        --lbaic-settings-cb-cl-ct-field-color: var(--lbaic-settings-cb-cl-ct-field-color-disabled);

        display: flex;
        padding: 4px;
        background-color: var(--lbaic-settings-cb-cl-content-bg);
        border-radius: 6px;
      }

      &-tab {
        --lbaic-settings-cb-cl-p: 20px;
        --lbaic-settings-cb-cl-content-bg: var(--lbaic-settings-white);

        position: relative;
        width: 100%;
        z-index: 1;

        &-in {
          position: relative;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          padding-inline: var(--lbaic-settings-cb-cl-p);
          border-radius: 6px;
          cursor: pointer;
        }

        &.active {
          .lbaic-settings-cb-cl-ct-toggle-tab-in {
            --lbaic-settings-cb-cl-ct-field-color: var(--lbaic-settings-cb-cl-ct-field-color-active);

            background-color: var(--lbaic-settings-cb-cl-content-bg);
            transition: background-color 180ms ease-in-out;

            .lbaic-settings-cb-cl-ct-desc-in {
              color: var(--lbaic-settings-cb-cl-ct-field-color);
            }

            .lbaic-settings-cb-cl-ct-icon {
              fill: url(#lbaic-settings-icon-gradient);
            }
          }
        }


        .lbaic-settings-cb-cl-ct-desc {
          padding-inline-start: 10px;

          &-in {
            color: var(--lbaic-settings-cb-cl-ct-field-color);
          }
        }
      }

      &-h-48 {
        height: 48px;
      }

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

    &-desc {
      display: flex;
      align-items: center;

      &-in {
        font-size: var(--lbaic-settings-fs-14);
        font-weight: var(--lbaic-settings-fw-500);
        line-height: var(--lbaic-settings-lh-24);
        color: inherit;

        &-nested {
          font-style: var(--lbaic-settings-fs-13);
          font-weight: var(--lbaic-settings-fw-500);
          line-height: var(--lbaic-settings-lh-24);
          color: inherit;
        }
      }

      @include min-width($lbaic-settings-wp-xl-breakpoint) {
        height: 42px;
      }
    }

    &-icon {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      display: block;
      fill: var(--lbaic-settings-cb-cl-ct-field-color-disabled);

      &.cost {
        fill: url(#lbaic-settings-icon-gradient);
      }
    }
  }

  &-field {
    &-status {
      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }

      @include min-width($lbaic-settings-wp-xl-breakpoint) {
        height: 42px;
        display: flex;
        align-items: center;
      }
    }
  }
}