.lbaic-settings {
  &-a-es {

    .lbaic-settings-dropdown {
      &-input {
        &:not(:placeholder-shown) {
          & ~ .lbaic-settings-dropdown-placeholder {
            --lbaic-settings-dropdown-local-bg: var(--lbaic-settings-table-accordion-content-bg);
          }
        }
      }

      &-input-focused {
        .lbaic-settings-dropdown-placeholder {
          --lbaic-settings-dropdown-local-bg: var(--lbaic-settings-table-accordion-content-bg);
        }
      }

      &-has-value {
        .lbaic-settings-dropdown-placeholder {
          --lbaic-settings-dropdown-local-bg: var(--lbaic-settings-table-accordion-content-bg);
        }
      }
    }

    .lbaic-settings-input-placeholder-in {
      transition: background-color 300ms ease-in-out;
    }

    .lbaic-settings-input {
      &:focus, &:focus-within, &:not(:placeholder-shown) {
        & ~ .lbaic-settings-input-placeholder {
          --lbaic-settings-input-local-bg: var(--lbaic-settings-table-accordion-content-bg);
        }
      }
    }

    // The only element with the lbaic-settings-table-accordion-body class - all corners are rounded
    // The element is both the first and last among elements with this class
    .lbaic-settings-table-accordion-body:nth-last-child(1 of .lbaic-settings-table-accordion-body):first-child {
      .lbaic-settings-cb-pw-table-summary {
        border-radius: 8px;

        &.active {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }

    // First element with this class (there are other elements with this class) - only top corners
    &:has(.lbaic-settings-table-accordion-body ~ .lbaic-settings-table-accordion-body) {
      .lbaic-settings-table-accordion-body:first-child {
        .lbaic-settings-cb-pw-table-summary {
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;

          &.active {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
      }
    }

    // Last element with this class (there are other elements with this class) - only bottom corners
    &:has(.lbaic-settings-table-accordion-body ~ .lbaic-settings-table-accordion-body) {
      .lbaic-settings-table-accordion-body:nth-last-child(1 of .lbaic-settings-table-accordion-body) {
        .lbaic-settings-cb-pw-table-summary {
          border-top-left-radius: 0;
          border-top-right-radius: 0;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;

          &.active {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
      }
    }

    // Not the first and not the last element with this class - no rounding
    &:has(.lbaic-settings-table-accordion-body ~ .lbaic-settings-table-accordion-body) {
      .lbaic-settings-table-accordion-body:not(:first-child):not(:nth-last-child(1 of .lbaic-settings-table-accordion-body)) {
        .lbaic-settings-cb-pw-table-summary {
          border-radius: 0;
        }
      }
    }

    .lbaic-settings-table-accordion {
      &-details {
        &.opened {
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
        }

        &-in {
          border-radius: inherit;
        }
      }

      &-content {
        border-radius: inherit;
      }
    }
  }

  &-actions {
    &-table {
      --lbaic-settings-table-card-grid: 1fr minmax(100px, auto) auto 96px;
    }

    &-handlers {
      &-icons {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0;

        // Expand icons to the left on hover
        &:hover {
          .lbaic-settings-actions-handlers-icon {
            margin-right: 2px;
          }

          .lbaic-settings-actions-handlers-icon:last-child {
            margin-right: 0;
          }
        }
      }

      &-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background-color: var(--lbaic-settings-white);
        border: 2px solid var(--lbaic-settings-table-card-border);
        color: var(--lbaic-settings-tooltip-fill);
        padding: 2px;
        transition: all 0.2s ease-out;
        flex-shrink: 0;
        margin-right: -14px;
        position: relative;

        // Last icon (rightmost) doesn't have negative margin
        &:last-child {
          margin-right: 0;
        }

        svg {
          width: 100%;
          height: 100%;
        }

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

  &-popup {
    &-add-action {
      --lbaic-settings-popup-max-width: 512px;

      padding-block-end: 0;

      .lbaic-settings-popup-header {
        &-label {
          font-weight: var(--lbaic-settings-fw-600);

        }

        &-desc {
          color: var(--lbaic-settings-add-parameters-header-desc-color);
          font-weight: var(--lbaic-settings-fw-400);
        }

        &-action {
          width: 16px;
          height: 16px;
          color: var(--lbaic-settings-add-parameters-header-desc-color);
          background-color: transparent;
          cursor: pointer;

          &-i {
            width: 100%;
            height: 100%;
            flex: 0 0 100%;
            fill: currentColor;
          }

          &:hover {
            color: #000;
          }
        }
      }

      .lbaic-settings-popup-body {
        padding-block: 10px;

        &-in {
          padding-block: 14px;
        }
      }

      .lbaic-settings-mp-popup {
        &-body {
          display: grid;
          grid-template-columns:repeat(3, minmax(0, 1fr));
          gap: 12px;

          &-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          &-in {
            position: relative;
            max-width: 100%;
            min-height: 130px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-block: 24px 20px;
            padding-inline: 16px;
            border: 2px solid var(--lbaic-settings-add-parameters-popup-border-color);
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 300ms ease-in-out, border 300ms ease-in-out;

            &.pro {
              border: 2px solid var(--lbaic-settings-add-parameters-popup-pro-border-color);

              .lbaic-settings-mp-popup-icon {
                color: var(--lbaic-settings-add-parameters-popup-pro-color);

              }

              .lbaic-settings-mp-popup-body-label {
                color: var(--lbaic-settings-add-parameters-popup-pro-color);
              }

              &:hover {
                .lbaic-settings-mp-popup-body-label {
                  color: var(--lbaic-settings-add-parameters-popup-pro-color)
                }
              }
            }

            &:hover {
              background-color: var(--lbaic-settings-add-parameters-popup-bg);
              border: 2px solid var(--lbaic-settings-add-parameters-popup-border-color-hover);

              .lbaic-settings-mp-popup-body-label {
                color: currentColor;
              }

              .lbaic-settings-mp-popup-icon {
                color: var(--lbaic-settings-primary);

                &-integration {
                  fill: #a64a7b;
                  opacity: 1;
                }
              }
            }
            @include min-width($lbaic-settings-wp-breakpoint){
              max-width: 146px;
            }
          }

          &-label {
            font-size: var(--lbaic-settings-fs-13);
            line-height: 1.375;
          }

          @include max-width($lbaic-settings-wp-breakpoint) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
          }

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

        }

        &-icon {
          width: 20px;
          height: 20px;
          flex: 0 0 20px;
          margin-block-end: 12px;
          color: currentColor;
          transition: color 300ms ease-in-out, opacity 300ms ease-in-out;

          &-integration {
            position: absolute;
            left: 8px;
            bottom: 8px;
            margin-block-end: 0;
            margin-inline-end: auto;
            fill: #a64a7b;
            opacity: .3;
          }
        }
      }

      .lbaic-settings-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        background: var(--lbaic-settings-badge-bg);

        &.pro {
          --lbaic-settings-badge-bg: linear-gradient(135deg, rgb(139, 92, 246), rgb(124, 58, 237) 50%, rgb(109, 40, 217));
          --lbaic-settings-badge-color: #fff;
          //--lbaic-settings-badge-pi-start: 10px;
          //--lbaic-settings-badge-pi-end: 10px;
        }

        &-label {
          font-size: 9px;
        }
      }

      .lbaic-settings-mp-popup-body-item-badge-icon {
        left: 8px;
        bottom: 8px;
        width: 24px;
        height: 24px;
      }

      .lbaic-settings-tab {
        & {
          height: 27px;
        }

        &-group {
          padding-inline: 24px;
        }
      }
    }
  }
}