& {
  .lbaic {
    &-input {
      &-container {
        padding: 16px;
        border-radius: 8px;
        background-color: var(--lbaic-input-action-bg);

        .lbaic-input-holder-in {
          background-color: var(--lbaic-input-with-action-bg);
        }
      }

      &-action {
        &-container {
          display: flex;
          justify-content: space-between;
          gap: 4px;
          align-items: center;
          margin-bottom: 12px;
        }

        &-label {
          font-size: var(--lbaic-fs-12);
          font-weight: var(--lbaic-fw-400);
          color: var(--lbaic-input-action-color);
          line-height: var(--lbaic-lh-16);
        }

        &-button {
          display: flex;
          flex-direction: row;
          gap: 4px;
          font-size: var(--lbaic-fs-12) !important;
          font-weight: var(--lbaic-fw-400);
          color: var(--lbaic-input-action-color);

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

            &-i {
              fill: var(--lbaic-input-color);
            }
          }

          &-i {
            width: 16px;
            height: 16px;
            fill: var(--lbaic-input-color);
          }
        }
      }

      &-holder {
        position: relative;

        &-in {
          border-radius: 8px;
          background-color: var(--lbaic-input-bg);

          // For buttons input e.g.
          &.no-background {
            background-color: inherit;
          }
        }

        &-inner {
          position: relative;
          height: var(--lbaic-textarea-height, 44px);
          max-height: var(--lbaic-textarea-height, 44px);

          @include media-min(768) {
            max-height: 93px;
          }

          // Auto height for buttons input
          &:has(.lbaic-buttons-input) {
            height: auto;
            max-height: none;
          }
        }
      }

      & {
        width: 100%;
        height: 100%;
        padding-inline-start: 14px;
        padding-inline-end: var(--lbaic-input-pie);
        font-size: var(--lbaic-fs-14);
        color: var(--lbaic-input-color);

        &::placeholder {
          color: var(--lbaic-input-placeholder-color);
        }
      }

      &-actions {
        position: absolute;
        right: var(--lbaic-input-actions-r, 0);
        bottom: 0;
        left: var(--lbaic-input-actions-l);
        height: 50px;
        display: flex;
        align-items: center;
        padding-inline-end: 9px;

        &-in {
          position: relative;

          &:not(:first-child) {
            padding-inline-start: 8px;
          }
        }
      }
    }

    &-textarea {
      width: 100%;
      height: 100%;
      margin: 0;
      padding-top: 13px;
      padding-bottom: 13px;
      padding-inline-start: 9px;
      padding-inline-end: var(--lbaic-input-pie);
      border: none;
      border-radius: 8px;
      font-size: var(--lbaic-fs-14);
      color: var(--lbaic-input-color);
      line-height: var(--lbaic-lh-24);
      scrollbar-color: transparent transparent;
      resize: none;

      &::placeholder {
        color: var(--lbaic-input-placeholder-color);
      }

      &:focus {
        color: var(--lbaic-input-color);
        outline: 1px solid rgba(var(--lbaic-main-rgb), 0.6);
      }

      &-invalid {
        outline: 1px solid var(--lbaic-input-error-outline);

        &:focus {
          outline: 1px solid var(--lbaic-input-error-outline);
        }
      }
    }

    &-upload {
      &-container {
        display: flex;
        padding: 9px 14px;
        overflow-x: auto;
      }

      &-in {
        position: relative;
        flex: 0 0 auto;

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

      &-file {
        max-width: 100%;
        max-height: 70px;
        display: block;
        object-fit: cover;
        border-radius: 10px;
      }

      &-remove, &-remove:not(:hover):not(:active):not(.has-background) {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 24px;
        padding: 4px;
        background-color: rgba(var(--lbaic-white-rgb), 0.6);
        box-shadow: var(--lbaic-upload-remove-shadow);
        border-radius: 50%;
        transition: background-color 180ms ease-in-out;

        &:hover {
          background-color: rgba(var(--lbaic-white-rgb), 0.8);
        }
      }

      &-remove {
        &-i {
          width: 100%;
          height: auto;
          display: block;
          fill: var(--lbaic-upload-fill);
        }
      }
    }

    &-buttons {
      &-input {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }
    }

    &-button {
      &-option {
        &, &:not(:hover):not(:active):not(.has-background), &:focus {
          min-height: 44px;
          padding: 12px 15px;
          border: 1px solid rgba(var(--lbaic-main-rgb), 0.2);
          border-radius: 8px;
          background-color: rgba(var(--lbaic-main-rgb), 0.05);
          color: var(--lbaic-input-color);
          font-size: var(--lbaic-fs-14);
          font-weight: var(--lbaic-fw-400);
          line-height: var(--lbaic-lh-20);
          text-align: center;
          cursor: pointer;
          white-space: nowrap;
        }

        &:hover {
          background-color: var(--lbaic-main);
          border-color: var(--lbaic-main);
        }

        &-label {
          display: block;
          word-break: break-word;
        }
      }
    }
  }
}