.lbaic-settings-ai-textarea {
  --lbaic-settings-contenteditable-min-height: 96px;
  --lbaic-settings-contenteditable-max-height: 300px;
  --lbaic-settings-contenteditable-pbe: 52px;
  --lbaic-settings-contenteditable-local-bg: #fff;
  --lbaic-settings-ai-textarea-action-bg: rgba(0, 0, 0, 0);

  position: relative;
  width: 28px;
  height: 28px;

  &.active {
    --lbaic-settings-ai-textarea-color: var(--lbaic-settings-primary);
    --lbaic-settings-ai-textarea-transform: translate3d(0, 4px, 0);
    --lbaic-settings-ai-textarea-opacity: 1;
    --lbaic-settings-ai-textarea-events: all;
  }

  &-toggle {
    --lbaic-settings-loading-circle-width: 18px;

    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: var(--lbaic-settings-ai-textarea-action-bg);

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

    &:active {
      --lbaic-settings-ai-textarea-action-bg: var(--lbaic-settings-button-bg-active)
    }

    &-i {
      width: 18px;
      height: auto;
      display: block;
      margin: auto;
      fill: var(--lbaic-settings-ai-textarea-color);
    }
  }

  &-in {
    position: absolute;
    top: 100%;
    right: var(--lbaic-settings-ai-textarea-right, unset);
    left: var(--lbaic-settings-ai-textarea-left, unset);
    width: 240px;
    border-radius: 6px;
    box-shadow: 0 4px 16px 0 rgba(var(--lbaic-settings-black-rgb), 0.06);
    transform: var(--lbaic-settings-ai-textarea-transform, translate3d(0, 8px, 0));
    opacity: var(--lbaic-settings-ai-textarea-opacity, 0);
    transition: transform 180ms ease-in-out, opacity 180ms ease-in-out;
    pointer-events: var(--lbaic-settings-ai-textarea-events, none);
    z-index: 40;

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

  &-action {
    --lbaic-settings-button-fs: var(--lbaic-settings-fs-12);

    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
  }
}