.lbaic-settings-cb {
  &-a {
    &-column {
      &-header {
        padding-block-end: 12px;
      }

      &-footer {
        padding-block-start: 16px;

        &-in {
          display: flex;
          flex-wrap: wrap;

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

        &-item {
          flex: 0 0 auto;

          &:not(:last-child) {
            padding-inline-end: 16px;
          }
        }
      }
    }

    &-row {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;

      &-in {
        position: relative;
      }

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

    &-colorpicker {
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      opacity: 0;
    }

    &-icon {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--lbaic-settings-cb-a-select-color-bg, var(--lbaic-settings-cb-a-select-current-color-bg));
      border-radius: 50%;
      opacity: var(--lbaic-settings-cb-a-select-color-opacity, 0);
      transition: background-color 300ms ease-in-out, opacity 300ms ease-in-out;
      cursor: pointer;
      z-index: 2;

      @include min-width($lbaic-settings-wp-breakpoint) {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
      }

      &:hover {
        --lbaic-settings-cb-a-select-color-bg: var(--lbaic-settings-radio-modern-active-border);
      }

      &:active {
        --lbaic-settings-cb-a-select-color-bg: var(--lbaic-settings-radio-modern-hover-bg);
        --lbaic-settings-cb-a-select-current-color-bg:var(--lbaic-settings-radio-modern-active-bg);
      }
    }

    &-i {
      width: 85%;
      height: auto;
      fill: currentColor;
    }
  }
}