.lbaic-settings-input {
  &-holder {
    --lbaic-settings-ai-textarea-right: 0;
    --lbaic-settings-ai-copilot-right: 0;

    width: 100%;

    &-in {
      position: relative;
      background-color: var(--lbaic-settings-input-local-bg, var(--lbaic-settings-input-bg));
      border: 1px solid var(--lbaic-settings-input-border);
      border-radius: 6px;
      transition: box-shadow 200ms ease-in-out, border-color 200ms ease-in-out;

      &:focus-within {
        border: 1px solid rgba(var(--lbaic-settings-primary-rgb), 0.3);
        box-shadow: 0 0 0 3px rgba(var(--lbaic-settings-primary-rgb), 0.2);
      }

      &.has-actions-1 {
        --lbaic-settings-input-pie: 44px;
      }

      &.has-actions-2 {
        --lbaic-settings-input-pie: 76px;
      }

      &.has-actions-3 {
        --lbaic-settings-input-pie: 108px;
      }

      &.has-actions-4 {
        --lbaic-settings-input-pie: 140px;
      }
    }
  }

  &-reverse {
    --lbaic-settings-input-align: right;
  }

  & {
    width: 100%;
    padding-block: 8px;
    padding-inline: var(--lbaic-settings-input-pis, 10px) var(--lbaic-settings-input-pie, 10px);
    font-size: var(--lbaic-settings-fs-13);
    font-weight: var(--lbaic-settings-fw-400);
    color: var(--lbaic-settings-input-color);
    line-height: var(--lbaic-settings-lh-24);
    text-align: var(--lbaic-settings-input-align, left);

    &:focus {
      box-shadow: none;
      outline: none;
    }
  }

  &-placeholder {
    height: var(--lbaic-settings-input-placeholder-height, 100%);
    display: flex;
    align-items: center;
    margin-block-end: 5px;

    &-in {
      padding-inline: var(--lbaic-settings-input-placeholder-padding-inline);
      font-size: var(--lbaic-settings-fs-14);
      font-weight: var(--lbaic-settings-fw-500);
      line-height: var(--lbaic-settings-lh-18);
      cursor: pointer;
    }
  }

  &-error {
    --lbaic-settings-input-border: var(--lbaic-settings-input-error);
    --lbaic-settings-input-placeholder-color: var(--lbaic-settings-input-error);

    .lbaic-settings-input-holder-in {
      &:focus-within {
        --lbaic-settings-input-border: var(--lbaic-settings-input-error);
        --lbaic-settings-input-placeholder-color: var(--lbaic-settings-input-error);
      }
    }

    &-message {
      padding-block-start: 4px;

      &-in {
        font-size: var(--lbaic-settings-fs-12);
        font-weight: var(--lbaic-settings-fw-500);
        color: var(--lbaic-settings-input-error);
        line-height: var(--lbaic-settings-lh-16);
      }
    }
  }

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

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

  &-reset {
    width: 100%;
    height: 100%;

    &:focus {
      box-shadow: none;
      outline: none;
    }
  }

  &-disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  &-has-children {
    --lbaic-settings-input-pis: 44px;

    .lbaic-settings-input-children {
      position: absolute;
      top: 12px;
      bottom: 12px;
      left: 12px;
      display: flex;
      align-items: center;
    }
  }

  &-has-actions {
    .lbaic-settings-input-actions {
      position: absolute;
      top: 8px;
      bottom: 8px;
      right: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 10;

      // Download
      .lbaic-settings-input-action {
        --lbaic-settings-input-action-action-bg: rgba(0, 0, 0, 0);
        --lbaic-settings-input-action-fill: currentColor;

        all: initial;
        position: relative;
        width: 24px;
        height: 24px;
        border-radius: 3px;

        &.active {
          --lbaic-settings-input-action-fill: var(--lbaic-settings-primary);
        }

        &:hover {
          --lbaic-settings-input-action-action-bg: var(--lbaic-settings-button-bg-hover);
        }

        &:active {
          --lbaic-settings-input-action-action-bg: var(--lbaic-settings-button-bg-active);
        }

        &-toggle {
          width: 100%;
          height: 100%;
          background-color: var(--lbaic-settings-input-action-action-bg);
          border-radius: 6px;

          &-i {
            width: 16px;
            height: auto;
            display: block;
            margin: auto;
            fill: var(--lbaic-settings-input-action-fill);
          }
        }

        & > .lbaic-settings-tooltip-wrapper {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

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