@import "~monday-ui-style/dist/mixins";
@import "../../styles/typography";
@import "../../styles/states";
$disabled-on-primary-color-opacity: 0.5;

.button {
  --loader-padding: 8px;
  outline: none;
  border: none;
  height: auto;
  border-radius: var(--border-radius-small);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--motion-productive-short) transform,
    var(--motion-productive-medium) var(--motion-timing-transition) min-width;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  @include focus-style();
  /* Prevent text selection */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  min-width: auto;

  .loader {
    height: 100%;

    .loaderSvg {
      position: static;
      height: 100%;
      margin: 0;
    }
  }

  .textPlaceholder {
    display: inline-block;
    opacity: 0;
    height: 0;
    visibility: hidden;
    white-space: pre;
  }

  &.success {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .successContent {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.marginRight {
  margin-right: var(--spacing-small);
}

.marginLeft {
  margin-left: var(--spacing-small);
}

.rightFlat {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.leftFlat {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.button:active:not(.preventClickAnimation) {
  transform: scale(0.95) translate3d(0, 0, 0);
}

.button .leftIcon {
  margin-right: var(--spacing-small);
}

.button .rightIcon {
  margin-left: var(--spacing-small);
}

.sizeXxs {
  @include smoothing-text;
  @include vibe-text(text2, normal);
  padding: 2px var(--spacing-xs);
  height: 16px;
  line-height: 16px;
}

.sizeXs {
  @include smoothing-text;
  @include vibe-text(text2, normal);
  padding: var(--spacing-xs) var(--spacing-small);
  height: 24px;
  line-height: 21px;
}

.sizeSmall {
  @include smoothing-text;
  @include vibe-text(text2, normal);
  padding: var(--spacing-xs) var(--spacing-small);
  height: 32px;
  line-height: 24px;
}

.sizeSmall .loader {
  top: 7px;
}

.sizeMedium {
  @include smoothing-text;
  @include vibe-text(text1, normal);
  padding: var(--spacing-small) var(--spacing-medium);
  height: 40px;
}

.sizeLarge {
  @include smoothing-text;
  @include vibe-text(text1, normal);
  padding: 12px var(--spacing-large);
  height: 48px;
}

.kindPrimary {
  color: var(--text-color-on-primary);
}

.kindPrimary.colorPrimary {
  background: var(--primary-color);
}

.kindPrimary.colorBrand {
  background: var(--brand-color);
  color: var(--text-color-on-brand);
}

.kindPrimary.colorPrimaryActive,
.kindPrimary.colorPrimary:hover,
.kindPrimary.colorPrimary:focus {
  background: var(--primary-hover-color);
}

.kindPrimary.colorBrandActive,
.kindPrimary.colorBrand:hover,
.kindPrimary.colorBrand:focus {
  background: var(--brand-hover-color);
}

.kindPrimary.colorPositive {
  background: var(--positive-color);
}

.kindPrimary.colorPositiveActive,
.kindPrimary.colorPositive:hover,
.kindPrimary.colorPositive:focus {
  background: var(--positive-color-hover);
}

.kindPrimary.colorNegative {
  background: var(--negative-color);
}

.kindPrimary.colorNegativeActive,
.kindPrimary.colorNegative:hover,
.kindPrimary.colorNegative:focus {
  background: var(--negative-color-hover);
}

.kindPrimary.colorInverted {
  background: var(--inverted-color-background);
  color: var(--text-color-on-inverted);
}

.kindPrimary.colorInvertedActive,
.kindPrimary.colorInverted:hover,
.kindPrimary.colorInverted:focus {
  background: var(--placeholder-color);
}

.kindPrimary.button.colorInverted.disabled {
  background: var(--disabled-text-color);
  color: var(--disabled-background-color);
}

.kindPrimary.colorOnPrimaryColor {
  background: var(--text-color-on-primary);
}

.kindPrimary.colorOnPrimaryColorActive,
.kindPrimary.colorOnPrimaryColor:hover,
.kindPrimary.colorOnPrimaryColor:focus {
  background-color: #e6e9ef;
  backdrop-filter: brightness(85%);
  @include focus-style-on-primary();
}

.kindPrimary.colorOnPrimaryColor.disabled {
  opacity: $disabled-on-primary-color-opacity;
  color: var(--text-color-on-primary);
}

.kindPrimary.colorFixedLight {
  background: var(--fixed-light-color);
}

.kindPrimary.colorFixedLightActive,
.kindPrimary.colorFixedLight:hover,
.kindPrimary.colorFixedLight:focus {
  background-color: #e6e9ef;
  backdrop-filter: brightness(85%);
  @include focus-style-on-primary();
}

.kindPrimary.colorFixedLight.disabled {
  opacity: $disabled-on-primary-color-opacity;
  color: var(--fixed-light-color);
}

.kindPrimary.colorOnInvertedBackground {
  background: var(--primary-background-color);
  color: var(--primary-text-color);
}

.kindPrimary.colorOnInvertedBackgroundActive,
.kindPrimary.colorOnInvertedBackground:hover,
.kindPrimary.colorOnInvertedBackground:focus {
  background: var(--ui-background-color);
}

.kindPrimary.button.colorOnInvertedBackground.disabled {
  background: var(--ui-background-color);
  color: var(--primary-text-color);
  opacity: $disabled-on-primary-color-opacity;
}

.kindPrimary.button.disabled {
  background: var(--disabled-background-color);
  color: var(--disabled-text-color);
  cursor: not-allowed;
  pointer-events: none;
}

.kindSecondary {
  border: 1px solid;
  border-color: var(--ui-border-color);
  color: var(--primary-text-color);
  background-color: transparent;
}

.kindSecondary.sizeSmall {
  line-height: 22px;
}

.kindSecondary.sizeMedium {
  line-height: 22px;
}

.kindSecondary.sizeLarge {
  line-height: 22px;
}

.kindSecondary.colorPrimaryActive {
  background-color: var(--primary-selected-color);
  border-color: var(--primary-color);
}

.kindSecondary.colorPrimaryActive:hover {
  background-color: var(--primary-selected-hover-color);
  border-color: var(--primary-color);
}

.kindSecondary.colorBrandActive {
  color: var(--text-color-on-brand);
}

.kindSecondary.colorBrandActive,
.kindSecondary.colorBrandActive:hover {
  background-color: var(--brand-selected-color);
  border-color: var(--brand-color);
}

.kindSecondary.colorPrimary:hover:not(.colorPrimaryActive),
.kindSecondary.colorPrimary:focus:not(.colorPrimaryActive) {
  background: var(--primary-background-hover-color);
}

.kindSecondary.colorBrand:hover:not(.colorBrandActive),
.kindSecondary.colorBrand:focus:not(.colorBrandActive) {
  background: var(--primary-background-hover-color);
}

.kindSecondary.colorPositive {
  color: var(--positive-color);
  border-color: var(--positive-color);
}

.kindSecondary.colorPositiveActive,
.kindSecondary.colorPositive:hover,
.kindSecondary.colorPositive:focus {
  background: var(--positive-color-selected);
}

.kindSecondary.colorNegative {
  color: var(--negative-color);
  border-color: var(--negative-color);
}

.kindSecondary.colorNegativeActive,
.kindSecondary.colorNegative:hover,
.kindSecondary.colorNegative:focus {
  background: var(--negative-color-selected);
}

.kindSecondary.colorInverted {
  color: var(--primary-text-color);
  border-color: var(--primary-text-color);
}

.kindSecondary.colorInvertedActive,
.kindSecondary.colorInverted:hover,
.kindSecondary.colorInverted:focus {
  background: var(--primary-background-hover-color);
}

.kindSecondary.colorInverted.disabled {
  border-color: var(--disabled-text-color);
  color: var(--disabled-text-color);
}

.kindSecondary.colorOnPrimaryColor {
  color: var(--text-color-on-primary);
  border-color: var(--text-color-on-primary);
}

.kindSecondary.colorOnPrimaryColorActive,
.kindSecondary.colorOnPrimaryColor:hover,
.kindSecondary.colorOnPrimaryColor:focus {
  backdrop-filter: brightness(85%);
  @include focus-style-on-primary();
}

.kindSecondary.colorOnPrimaryColor.disabled {
  opacity: $disabled-on-primary-color-opacity;
  color: var(--text-color-on-primary);
}

.kindSecondary.colorFixedLight {
  border-color: var(--fixed-light-color);
  color: var(--fixed-light-color);
}

.kindSecondary.colorFixedLightActive,
.kindSecondary.colorFixedLight:hover,
.kindSecondary.colorFixedLight:focus {
  backdrop-filter: brightness(85%);
  @include focus-style-on-primary();
}

.kindSecondary.colorOnInvertedBackground {
  border-color: var(--text-color-on-inverted);
  color: var(--text-color-on-inverted);
}

.kindSecondary.colorOnInvertedBackgroundActive,
.kindSecondary.colorOnInvertedBackground:hover,
.kindSecondary.colorOnInvertedBackground:focus {
  background: var(--icon-color);
}

.kindSecondary.colorOnInvertedBackground.disabled {
  border-color: var(--text-color-on-inverted);
  color: var(--text-color-on-inverted);
  opacity: $disabled-on-primary-color-opacity;
}

.kindSecondary.colorFixedLight.disabled {
  opacity: $disabled-on-primary-color-opacity;
  color: var(--fixed-light-color);
}

.kindSecondary.disabled {
  border-color: var(--disabled-background-color);
  color: var(--disabled-text-color);
  cursor: not-allowed;
  pointer-events: none;
}

.kindSecondary.disabled:hover {
  background-color: transparent;
}

.kindTertiary {
  color: var(--primary-text-color);
  background-color: transparent;
}

.kindTertiary.colorPrimaryActive {
  background-color: var(--primary-selected-color);
}

.kindTertiary.colorPrimaryActive:hover {
  background-color: var(--primary-selected-hover-color);
}

.kindTertiary.colorBrandActive {
  color: var(--text-color-on-brand);
}

.kindTertiary.colorBrandActive,
.kindTertiary.colorBrandActive:hover {
  background-color: var(--brand-selected-color);
}

.kindTertiary.colorPrimary:hover:not(.colorPrimaryActive),
.kindTertiary.colorPrimary:focus:not(.colorPrimaryActive) {
  background: var(--primary-background-hover-color);
}

.kindTertiary.colorBrand:hover:not(.colorBrandActive),
.kindTertiary.colorBrand:focus:not(.colorBrandActive) {
  background: var(--primary-background-hover-color);
}

.kindTertiary.colorPositive {
  color: var(--positive-color);
}

.kindTertiary.colorPositiveActive,
.kindTertiary.colorPositive:hover,
.kindTertiary.colorPositive:focus {
  background: var(--positive-color-selected);
}

.kindTertiary.colorNegative {
  color: var(--negative-color);
}

.kindTertiary.colorNegativeActive,
.kindTertiary.colorNegative:hover,
.kindTertiary.colorNegative:focus {
  background: var(--negative-color-selected);
}

.kindTertiary.colorInverted {
  color: var(--primary-text-color);
}

.kindTertiary.colorInvertedActive,
.kindTertiary.colorInverted:hover,
.kindTertiary.colorInverted:focus {
  background: var(--primary-background-hover-color);
}

.kindTertiary.colorInverted.disabled {
  color: var(--disabled-text-color);
}

.kindTertiary.colorOnPrimaryColor {
  color: var(--text-color-on-primary);
}

.kindTertiary.colorOnPrimaryColorActive,
.kindTertiary.colorOnPrimaryColor:hover,
.kindTertiary.colorOnPrimaryColor:focus {
  backdrop-filter: brightness(85%);
  @include focus-style-on-primary();
}

.kindTertiary.colorOnPrimaryColor.disabled {
  opacity: $disabled-on-primary-color-opacity;
  color: var(--text-color-on-primary);
}

.kindTertiary.colorFixedLight {
  color: var(--fixed-light-color);
}

.kindTertiary.colorFixedLightActive,
.kindTertiary.colorFixedLight:hover,
.kindTertiary.colorFixedLight:focus {
  backdrop-filter: brightness(85%);
  @include focus-style-on-primary();
}

.kindTertiary.colorFixedLight.disabled {
  opacity: $disabled-on-primary-color-opacity;
  color: var(--fixed-light-color);
}

.kindTertiary.colorOnInvertedBackground {
  color: var(--text-color-on-inverted);
}

.kindTertiary.colorOnInvertedBackgroundActive,
.kindTertiary.colorOnInvertedBackground:hover,
.kindTertiary.colorOnInvertedBackground:focus {
  background: var(--icon-color);
}

.kindTertiary.colorOnInvertedBackground.disabled {
  background: var(--icon-color);
  opacity: $disabled-on-primary-color-opacity;
  color: var(--text-color-on-inverted);
}

.kindTertiary.disabled {
  color: var(--disabled-text-color);
  cursor: not-allowed;
  pointer-events: none;
}

.kindTertiary.disabled:hover {
  background-color: transparent;
}

.noSidePadding {
  padding-right: 0;
  padding-left: 0;
}

.button.insetFocusStyle {
  @include focus-style-inset();
}