.lbaic-settings-cb-pw {

  --lbaic-settings-table-bg: transparent;

  &-container {
    height: 100%;

    &-in {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lbaic-settings-table-accordion-lc {
      --lbaic-settings-table-bg: var(--lbaic-settings-white);

      // Lead capture widget fields
      .lbaic-settings-table-accordion-body {
        &:first-child {
          .lbaic-settings-table-accordion-summary {
            border-top-left-radius: 11px;
            border-top-right-radius: 11px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;

            & > .lbaic-settings-table-accordion-body-item {
              border-top: none;
            }
          }
        }
      }

      .lbaic-settings-table-accordion-body:nth-last-child(2 of :where(.lbaic-settings-table-accordion-body)) > .lbaic-settings-table-accordion-summary > .lbaic-settings-table-accordion-body-item {
        border-bottom: none;
      }
    }
  }

  &-column {
    position: relative;
    height: 100%;
    display: grid;
    gap: 24px;
    background-color: var(--lbaic-settings-white);
    border-radius: var(--lbaic-settings-local-border-radius);
    z-index: 2;

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

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

    &-in {
      height: 100%;
      min-width: 0;
    }
  }

  &-table {
    &-header {
      &-item {
        vertical-align: middle;

        &:first-child {
          min-width: 112px;
          justify-content: flex-end;
          @include max-width($lbaic-settings-wp-xl-breakpoint) {
            min-width: 0;
          }
        }

        @include max-width($lbaic-settings-wp-xl-breakpoint) {
          padding-inline: 8px;
          &:first-child {
            min-width: 0;
          }
        }

        &-puzzle {
          &:first-child {
            min-width: 0;
          }

        }
      }
    }

    &-body {
      &-item {
        min-width: 55px;
        padding-inline: 4px;
        display: flex;
        align-items: center;
        gap: 5px;

        .lbaic-settings-cb-pw-table-actions-item {
          opacity: 0;

          &:hover {
            background-color: transparent;
          }
        }

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

    &-item {
      width: 100%;
      min-width: 130px;
      display: flex;
      align-items: center;
      gap: 5px;

      .lbaic-settings-cb-pw-table-actions-item {
        opacity: 0;

        &:hover {
          background-color: transparent;
        }
      }

      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        min-width: 100px;
        padding-inline: 8px;
      }

      @include max-width($lbaic-settings-wp-sm-breakpoint) {
        min-width: 57px;
        padding-inline: 4px;
      }
    }

    &-summary {
      display: grid;
      grid-template-columns: max-content max-content 1fr max-content max-content;
      cursor: pointer;

      &-nested {
        grid-template-columns: max-content max-content 1fr 1fr minmax(38px, max-content) minmax(26px, max-content);
        @include min-width($lbaic-settings-wp-xl-breakpoint) {
          grid-template-columns: max-content max-content 1fr 1fr minmax(76px, max-content) minmax(60px, max-content);
        }
      }

      &:hover {
        .lbaic-settings-cb-pw-button-dragable {
          opacity: 1;
          transition: opacity 0.05s ease;

          &:active {
            background-color: var(--lbaic-settings-button-bg-active);
            cursor: grabbing;
          }
        }

        .lbaic-settings-cb-pw-table {
          &-item {
            .lbaic-settings-cb-pw-table-actions-item {
              opacity: 1;
            }
          }

          &-body-item {
            .lbaic-settings-cb-pw-table-actions-item {
              opacity: 1;
            }
          }
        }
      }

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

    &-number {
      width: max-content;
      min-width: 20px;
      display: flex;
      align-items: center;
      padding-block: 14px;
      text-align: left;
      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        padding-inline: 8px;
      }

      @include max-width($lbaic-settings-wp-sm-breakpoint) {
        padding-inline: 4px;
      }
    }

    &-actions {
      display: flex;
      align-items: center;
      padding-block: 13px;

      @include max-width($lbaic-settings-wp-xl-breakpoint) {
        padding-inline: 8px;
      }

      @include max-width($lbaic-settings-wp-breakpoint) {
        padding-inline: 4px;
      }

      &-in {
        display: flex;

        &-i {
          width: 18px;
          height: auto;
          display: block;
          fill: var(--lbaic-settings-table-accordion-i);
        }
      }

      &-nested {
        &-in {
          justify-content: flex-end;
        }
      }

      &-item {
        margin-inline-end: 0;

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

        &:only-child {
          margin-inline-start: auto;
          margin-inline-end: 0;
        }
      }

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

    &-left {
      &-actions {
        width: max-content;
        min-width: 44px;
        padding-block: 14px;
        vertical-align: middle;

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

        @include max-width($lbaic-settings-wp-xl-breakpoint) {
          padding-inline: 8px;
        }

        @include max-width($lbaic-settings-wp-sm-breakpoint) {
          padding-inline: 4px;
        }
      }
    }

    &-id {
      width: 0;
      padding-inline-start: 0;
    }

    &-inside {
      border: 1px solid var(--lbaic-settings-table-accordion-border);
      border-radius: 12px;

      &-item {
        border: none;
      }

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

      .lbaic-settings-table-accordion-body {
        &.first-of-type {
          .lbaic-settings-table-accordion-summary {
            border-top-left-radius: 11px;
            border-top-right-radius: 11px;
          }

          .lbaic-settings-table-accordion-summary > .lbaic-settings-table-accordion-body-item {
            border-top: unset;
          }
        }

        &.last-of-type {
          .lbaic-settings-table-accordion-summary:not(.active) {
            border-bottom-left-radius: 11px;
            border-bottom-right-radius: 11px;
          }

          .lbaic-settings-cb-pw-table-accordion-content {
            border-bottom-left-radius: 11px;
            border-bottom-right-radius: 11px;
          }
        }
      }
    }
  }

  &-i {
    width: 100%;
    height: auto;
    display: block;
  }

  &-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: block;
    margin-block: auto;
    margin-inline-end: 8px;
    fill: var(--lbaic-settings-black-rgb);

    &-details {
      fill: var(--lbaic-settings-white);
    }
  }

  &-dropdown {
    &-action {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 80px;
      display: flex;
      cursor: pointer;
    }
  }

  &-in {
    width: 24px;
    height: auto;
    display: block;
    margin-block: auto;
    margin-inline-end: 16px;
    fill: var(--lbaic-settings-black-rgb);
  }

  &-button {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;

    &-primary {
      width: 18px;
      height: 18px;
      border-radius: 3px;

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

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

      &:active {
        background-color: var(--lbaic-settings-button-bg-active);
      }

    }

    &-i {
      width: inherit;
      height: inherit;
      display: block;
      margin: auto;
      fill: var(--lbaic-settings-table-accordion-i);
    }

    &-dragable {
      width: 15px;
      height: 24px;
      flex: 0 0 15px;
      margin-inline-end: 4px;
      border-radius: 3px;
      opacity: 0;
      transition: background-color 0.05s ease, opacity 0.05s ease;
      cursor: grab;
      @include min-width($lbaic-settings-wp-sm-breakpoint) {
        width: 19px;
        flex: 0 0 19px;
        margin-inline-end: 10px;
      }

      &:hover {
        background-color: var(--lbaic-settings-button-bg-hover);
        transition: background-color 0.05s ease;
      }

      &:active {
        background-color: var(--lbaic-settings-button-bg-active);
      }
    }
  }

  &-table {
    &-accordion {
      --lbaic-settings-input-local-bg: var(--lbaic-settings-table-accordion-content-bg);
      --lbaic-settings-dropdown-local-bg: var(--lbaic-settings-table-accordion-content-bg);
      height: 100%;
      overflow: hidden;

      &-content {
        padding-block: 0 16px;
        @include min-width($lbaic-settings-wp-xl-breakpoint) {
          padding-inline-start: 43px;
        }
      }

      &-header {
        &-in {
          display: grid;
          grid-template-columns: max-content 1fr;

          &-nested {
            display: grid;
            grid-template-columns: max-content 1fr max-content;
            align-items: center;

            &-item {
              display: none;
              @include min-width($lbaic-settings-wp-xl-breakpoint) {
                display: grid;
                grid-template-columns: max-content 1fr 1fr minmax(76px, max-content) minmax(104px, max-content);
              }
            }
          }
        }

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

      &-body {
        &-i {
          width: 16px;
          height: auto;
          flex: 0 0 16px;
          display: block;
          margin-inline: auto;
          fill: var(--lbaic-settings-table-accordion-i);
        }

        &-label {
          display: block;
          font-size: var(--lbaic-settings-fs-12);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

          @include min-width($lbaic-settings-wp-sm-breakpoint) {
            font-size: var(--lbaic-settings-fs-14);
          }
        }
      }

      .lbaic-settings-table-accordion-body {
        &:nth-last-child(1 of :where(.lbaic-settings-table-accordion-body)) {
          & > .lbaic-settings-table-accordion-summary {
            & > .lbaic-settings-table-accordion-body-item {
              border-bottom: 1px solid var(--lbaic-settings-table-accordion-border);
            }
          }
        }
      }


      &-details {
        &.opened {
          display: block;
        }
      }
    }

    &-card {
      &-body {
        &-label {
          &-null {
            opacity: .2;
          }
        }
      }
    }

    &-position {
      &-actions {
        height: 27px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        &-item {
          --lbaic-settings-arrow-icon-fill: var(--lbaic-settings-table-accordion-i);
          width: 10px;
          height: auto;
          flex: 0 0 10px;

          &:hover {
            --lbaic-settings-arrow-icon-fill: var(--lbaic-settings-button-color-hover)
          }
        }

        &-i {
          width: inherit;
          height: inherit;
          display: block;
          fill: var(--lbaic-settings-arrow-icon-fill);
        }
      }
    }
  }

  &-footer-actions-in {
    margin-inline-start: auto;
  }

  &-empty {
    &-title {
      font-size: var(--lbaic-settings-fs-14);
    }

    &-subtitle {
      font-size: var(--lbaic-settings-fs-13);
    }
  }

  &-input {
    &-children {
      --lbaic-settings-ai-textarea-right: 0;

      position: absolute;
      top: 12px;
      bottom: 12px;
      right: 12px;
      display: flex;
      align-items: center;

      &-in {
        width: 20px;
        height: 20px;
        margin-inline-end: 16px;
        border-radius: 3px;
        cursor: pointer;
        transition: background-color .3s;

        &-i {
          width: 16px;
          flex: 0 0 16px;
          height: auto;
          display: block;
          margin: auto;
          fill: currentColor;
        }

        &:hover {
          background-color: var(--lbaic-settings-cb-cl-ct-field-bg);
          transition: background-color .3s;
        }
      }
    }
  }

  &-popup {
    &-add {
      &-item {
        --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: 146px;
              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;

              &: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 {
                  fill: var(--lbaic-settings-primary);
                }
              }
            }

            &-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;
            fill: currentColor;
            transition: fill 300ms ease-in-out, opacity 300ms ease-in-out;
          }
        }
      }
    }
  }
}