@keyframes lbaic-send-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

& {
  .lbaic {
    &-button {

      &, &:not(:hover):not(:active):not(.has-background) {
        position: relative;
        width: var(--lbaic-button-width);
        height: var(--lbaic-button-height);
        padding: var(--lbaic-button-padding);
        display: flex;
        background-color: var(--lbaic-button-bg);
        color: var(--lbaic-button-color);
        border: var(--lbaic-button-border);
        border-radius: var(--lbaic-button-border-radius, 4px);
        transition: background-color var(--lbaic-ts-d) var(--lbaic-ts-tf);
        transform: translate3d(0, 0, 0);
        box-shadow: var(--lbaic-button-shadow);
      }

      &:hover, &:focus, &:active {
        background-color: var(--lbaic-button-bg);
      }

      svg {
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
        fill: currentColor;
        z-index: 2;
      }

      &-center {
        justify-content: center;
        align-items: center;
      }

      &-filled, &-filled:not(:hover):not(:active):not(.has-background), &-filled:focus, &-filled:active {
        position: relative;
        width: 32px;
        height: 32px;
        padding: 4px;
        background-color: var(--lbaic-main);
        border-radius: 8px;
        color: var(--lbaic-white-100);

        &:before, &:after {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          border-radius: 8px;
          transition: opacity 180ms ease-in-out;
          z-index: 1;
        }

        &:before {
          background-color: rgba(var(--lbaic-white-rgb), 0.2);
          opacity: var(--lbaic-button-filled-opacity-hover, 0);
        }

        &:after {
          background-color: rgba(var(--lbaic-black-rgb), 0.2);
          opacity: var(--lbaic-button-filled-opacity-active, 0);
        }

        &:hover {
          --lbaic-button-filled-opacity-hover: 1;
        }

        &:active {
          --lbaic-button-filled-opacity-active: 1;

          transition: 0ms;
        }
      }

      &-minimal, &-minimal:not(:hover):not(:active):not(.has-background) {
        width: 32px;
        height: 32px;
        padding: 2px;
        border-radius: 4px;
        color: var(--lbaic-button-color);
        transition: background-color 180ms ease-in-out;

        &:hover {
          background-color: rgba(var(--lbaic-button-bg-hover), 0.1);
        }

        &:active {
          background-color: rgba(var(--lbaic-button-bg-hover), 0.19);
        }
      }

      &-minimal-28, &-minimal-28:not(:hover):not(:active):not(.has-background) {
        width: 28px;
        height: 28px;
      }

      &-rounded, &-rounded:not(:hover):not(:active):not(.has-background) {
        position: relative;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        padding: 2px;
        border-radius: 50%;
        color: #666;
        transition: color 180ms ease-in-out;

        &:before {
          content: '';
          position: absolute;
          top: -2px;
          right: -2px;
          bottom: -2px;
          left: -2px;
          background-color: var(--lbaic-button-rounded-bg);
          border: 2px solid rgba(var(--lbaic-button-rounded-bg-active), 0.2);
          border-radius: 50%;
          opacity: var(--lbaic-button-rounded-opacity-active, 0);
          transition: opacity 180ms ease-in-out;
          z-index: -1;
        }

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

        // Override for sources button to allow flexible width
        &.lbaic-button-sources {
          width: auto;
          flex: 0 0 auto;
          min-width: 18px;
          padding: 2px;
          border-radius: 9px;
        }
      }

      &-rounded {
        &.active {
          --lbaic-button-rounded-opacity-active: 1;
        }
      }

      &-sources {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 0 0 auto;
        width: auto;
        height: 18px;
        padding: 2px;
        box-sizing: border-box;

        &-icon {
          // TODO - remove !important
          width: 14px !important;
          height: 14px !important;
          flex-shrink: 0;
          display: block;
        }

        &-count {
          font-size: 10px;
          line-height: 1;
          display: block;
          white-space: nowrap;
          flex-shrink: 0;
        }
      }

      &-input, &-input:not(:hover):not(:active):not(.has-background) {
        width: 32px;
        height: 32px;
        color: var(--lbaic-input-button-color);
        border-radius: 50%;
        transition: background-color 180ms ease-in-out;

        &:hover {
          background-color: rgba(var(--lbaic-input-button-bg-hover), 0.1);
        }
      }

      &-send, &-send:not(:hover):not(:active):not(.has-background) {
        --lbaic-button-height: 32px;
        background-color: var(--lbaic-main);
        color: var(--lbaic-white-100);

        &:before {
          content: '';
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background-color: rgba(var(--lbaic-white-rgb), 0.2);
          opacity: 0;
          transition: opacity 180ms ease-in-out;
          border-radius: inherit;
          z-index: 1;
        }

        svg {
          transition: transform 180ms ease-in-out;
        }

        &:hover {
          &:before {
            opacity: 1;
          }

          svg {
            transform: translate3d(0, -2px, 0);
          }
        }

        &:focus, &:active {
          background-color: var(--lbaic-main);
        }

        &:active {
          transform: scale(0.95);
        }
      }

      &-send {
        &-with {
          &-icon {
            --lbaic-button-width: 32px;
            --lbaic-button-border-radius: 50%;
          }

          &-label, &-label:not(:hover):not(:active):not(.has-background) {
            max-width: 80px;
            padding-inline-start: 12px;
            padding-inline-end: 12px;
            border-radius: 4px;
          }
        }

        &-label {
          position: relative;
          max-width: 100%;
          display: block;
          font-size: 14px;
          font-weight: var(--lbaic-fw-500);
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          z-index: 2;
        }

        &-loading {
          pointer-events: none;

          svg {
            animation: lbaic-send-loading 2400ms linear infinite;
          }
        }

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

      &-skip, &-skip:not(:hover):not(:active):not(.has-background) {
        --lbaic-button-height: 32px;
        color: var(--lbaic-input-action-color);

        &:focus, &:active, &:hover {
          color: var(--lbaic-input-color);
        }
      }

      &-skip {
        &-with {
          &-icon {
            --lbaic-button-width: 32px;
            --lbaic-button-border-radius: 50%;
          }

          &-label, &-label:not(:hover):not(:active):not(.has-background) {
            max-width: 80px;
            padding-inline: 6px;
          }
        }

        &-label {
          position: relative;
          max-width: 100%;
          display: block;
          font-size: var(--lbaic-fs-12);
          font-weight: var(--lbaic-fw-400);
          line-height: var(--lbaic-lh-16);
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          z-index: 2;
        }

        &-loading {
          pointer-events: none;

          svg {
            animation: lbaic-send-loading 2400ms linear infinite;
          }
        }
      }

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

      &-h-40 {
        --lbaic-button-height: 40px;
      }

      &-primary {
        --lbaic-button-width: 100%;
        --lbaic-button-pi-start: 10px;
        --lbaic-button-pi-end: 10px;
        --lbaic-button-bg: var(--lbaic-button-primary-bg);
        --lbaic-button-border: 1px solid var(--lbaic-button-primary-border);
        --lbaic-button-border-radius: 6px;
        --lbaic-button-fs: var(--lbaic-fs-14);
        --lbaic-button-fw: var(--lbaic-fw-500);
        --lbaic-button-color: var(--lbaic-button-primary-color);
        --lbaic-button-lh: var(--lbaic-lh-20);
        --lbaic-button-i-width: 16px;
        --lbaic-button-label-pi-start: 6px;
        --lbaic-button-label-pi-end: 6px;
      }

      &-secondary {
        --lbaic-button-width: 100%;
        --lbaic-button-pi-start: 10px;
        --lbaic-button-pi-end: 10px;
        --lbaic-button-bg: var(--lbaic-button-secondary-bg);
        --lbaic-button-border: 1px solid var(--lbaic-button-secondary-border);
        --lbaic-button-border-radius: 6px;
        --lbaic-button-fs: var(--lbaic-fs-14);
        --lbaic-button-fw: var(--lbaic-fw-500);
        --lbaic-button-color: var(--lbaic-button-secondary-color);
        --lbaic-button-lh: var(--lbaic-lh-20);
        --lbaic-button-i-width: 16px;
        --lbaic-button-label-pi-start: 6px;
        --lbaic-button-label-pi-end: 6px;
      }

      &-recommendation {
        &, &:not(:hover):not(:active):not(.has-background), &:focus {
          --lbaic-recommendation-color: #969696;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          padding: 8px;
          border-radius: 8px;
          background-color: transparent;
          transition: color 160ms ease-in-out, background-color 160ms ease-in-out;
        }

        &:not(:disabled):hover {
          --lbaic-recommendation-color: var(--lbaic-text-color);
          color: #ffffff;
          background-color: var(--lbaic-chat-bg);
        }

        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
        }

        .lbaic-recommendation-label {
          font-size: var(--lbaic-fs-12);
          color: var(--lbaic-recommendation-color);
        }

        .lbaic-recommendation-icon {
          width: 16px;
          height: 16px;
          color: var(--lbaic-recommendation-color);
          fill: var(--lbaic-recommendation-color);
        }

        &.lbaic-recommendation__cancel {
          &, &:not(:hover):not(:active):not(.has-background), &:focus {
            padding: 0;
          }

          &:hover {
            background-color: transparent;
            --lbaic-recommendation-color: var(--lbaic-text-color);
          }
        }
      }

      &-label {
        position: relative;
        max-width: 100%;
        padding-inline-start: 3px;
        display: block;
        font-size: var(--lbaic-fs-14);
        font-weight: var(--lbaic-button-label-fw, var(--lbaic-fw-500));
        line-height: inherit;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        z-index: 2;

        &:first-child {
          padding-inline-end: var(--lbaic-button-label-pi-end);
        }

        &:last-child {
          padding-inline-start: var(--lbaic-button-label-pi-start);
        }
      }

    }
  }
}
