@import "../../styles/global.scss";

.ai-button {
  border: none;
  outline: none;
  border-radius: 6px;
  box-sizing: border-box;
  min-width: 77px;
  padding: $size-spacing-xxxs $size-spacing-s;
  cursor: pointer;
  color: $color-font-ink;
  transition: 0.25s ease-in-out;

  @extend .center;
  &:focus {
    box-shadow: $size-spacing-none $size-spacing-none $size-spacing-none 1px
      $color-core-blue-light inset;
  }

  .ai-button-content-container {
    @extend .flex-row;

    .ai-button-label-prefix {
      @extend .center;
      margin-right: $size-spacing-xs;
    }

    .ai-button-label-suffix {
      @extend .center;
      margin-left: $size-spacing-xs;
    }

    .ai-button-loader {
      @extend .center;
      margin-top: 2px;
      margin-left: $size-spacing-xs;
    }
  }
}
.ai-button-size-default {
  height: 40px;
}
.ai-button-size-compact {
  height: 32px;
}
.ai-button-common-disabled {
  background-color: $color-core-grey-lighter;
  color: $color-font-disabled;
  cursor: not-allowed;
}
.ai-button-primary {
  background-color: $color-semantic-primary;
  color: $color-core-white;
  &:not([disabled]):hover {
    background-color: $color-core-blue-dark;
  }
  &:disabled {
    @extend .ai-button-common-disabled;
  }
}
.ai-button-secondary {
  background-color: $color-core-grey-lighter;
  &:not([disabled]):hover {
    background-color: $color-core-grey-light;
  }
  &:disabled {
    @extend .ai-button-common-disabled;
  }
}
.ai-button-outline {
  background-color: transparent;
  border: 1px solid $color-core-grey-base;
  &:not([disabled]):hover {
    background-color: $color-core-grey-lightest;
  }
  &:disabled {
    border-color: $color-font-disabled;
    color: $color-font-disabled;
    cursor: not-allowed;
  }
}
.ai-button-ghost {
  background-color: transparent;
  &:not([disabled]):hover {
    background-color: $color-core-grey-lighter;
  }
  &:disabled {
    color: $color-font-disabled;
    cursor: not-allowed;
  }
}
.ai-button-destructive {
  background-color: $color-core-red-base;
  color: $color-core-white;
  &:not([disabled]):hover {
    background-color: $color-core-red-dark;
  }
  &:disabled {
    @extend .ai-button-common-disabled;
  }
}