@import "../../styles/global-css-settings.scss";
@import "../../styles/typography.scss";
@import "../../styles/themes.scss";

.monday-style-button {
  --loader-padding: 8px;
  outline: none;
  border: none;
  height: auto;
  font-family: Roboto, sans-serif;
  border-radius: $border-radius-small;
  cursor: pointer;
  white-space: nowrap;
  transition: 50ms transform, 0.1s $expand-animation-timing min-width;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  // will be updated dynamically after render by js
  --element-width: 32;
  --element-height: 32;

  &--margin-right {
    margin-right: $spacing-small;
  }
  &--margin-left {
    margin-left: $spacing-small;
  }

  &--right-flat {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  &--left-flat {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  min-width: var(--element-width);

  &.monday-style-button--loading {
    min-width: 0;
    width: var(--element-height);
    height: var(--element-height);
    position: relative;
  }

  .monday-style-button__loader {
    width: calc(var(--element-height) - var(--loader-padding) * 2);
    height: calc(var(--element-height) - var(--loader-padding) * 2);
    position: absolute;
    left: var(--loader-padding);
    top: var(--loader-padding);

    .monday-style-button-loader-svg {
      width: calc(var(--element-height) - var(--loader-padding) * 2);
      height: calc(var(--element-height) - var(--loader-padding) * 2);
    }
  }

  &:active {
    &:not(.monday-style-button--prevent-click-animation) {
      transform: scale(0.95) translate3d(0, 0, 0);
    }
  }
  .monday-style-button--left-icon {
    padding-right: $spacing-small;
  }

  .monday-style-button--right-icon {
    padding-left: $spacing-small;
  }

  &--size {
    &-sm {
      @include font-input();
      padding: $spacing-xs $spacing-small;
      min-height: 32px;
      line-height: 24px;
      .monday-style-button__loader {
        top: 7px;
      }
    }

    &-md {
      @include font-paragraph();
      padding: $spacing-small $spacing-medium;
      min-height: 40px;
    }

    &-lg {
      @include font-paragraph();
      padding: $spacing-small-medium $spacing-large;
      min-height: 48px;
    }
  }

  &--kind {
    &-primary {
      @include theme-prop(color, text-color-on-primary);
      &.monday-style-button {
        &--color {
          &-primary {
            @include theme-prop(background-color, primary-color);
            &-active,
            &:hover,
            &:focus {
              @include theme-prop(background-color, primary-hover-color);
            }
          }
          &-positive {
            @include theme-prop(background-color, positive-color);
            &-active,
            &:hover,
            &:focus {
              @include theme-prop(background-color, positive-color-hover);
            }
          }
          &-negative {
            @include theme-prop(background-color, negative-color);
            &-active,
            &:hover,
            &:focus {
              @include theme-prop(background-color, negative-color-hover);
            }
          }
          &-on-primary-color {
            @include theme-prop(background-color, text-color-on-primary);
            &-active,
            &:hover,
            &:focus {
              background-color: #e6e9ef;
              backdrop-filter: brightness(85%);
            }
          }
        }
        &:disabled {
          @include theme-prop(background-color, disabled-background-color);
          @include theme-prop(color, disabled-text-color);
          cursor: not-allowed;
          pointer-events: none;
        }
      }
    }
    &-secondary {
      border: 1px solid;
      @include theme-prop(border-color, ui-border-color);
      @include theme-prop(color, primary-text-color);
      background-color: transparent;
      &.monday-style-button {
        &--size {
          &-sm {
            line-height: 22px;
          }

          &-md {
            line-height: 22px;
          }

          &-lg {
            line-height: 22px;
          }
        }
      }

      &.monday-style-button {
        &--color {
          &-primary {
            &-active,
            &:hover,
            &:focus {
              @include theme-prop(
                background-color,
                primary-background-hover-color
              );
            }
          }
          &-positive {
            @include theme-prop(color, positive-color);
            @include theme-prop(border-color, positive-color);
            &-active,
            &:hover,
            &:focus {
              @include theme-prop(background-color, positive-color-selected);
            }
          }
          &-negative {
            @include theme-prop(color, negative-color);
            @include theme-prop(border-color, negative-color);
            &-active,
            &:hover,
            &:focus {
              @include theme-prop(background-color, negative-color-selected);
            }
          }
          &-on-primary-color {
            @include theme-prop(color, text-color-on-primary);
            @include theme-prop(border-color, text-color-on-primary);
            &-active,
            &:hover,
            &:focus {
              backdrop-filter: brightness(85%);
            }
          }
        }
      }
      &:disabled {
        @include theme-prop(border-color, disabled-background-color);
        @include theme-prop(color, disabled-text-color);
        cursor: not-allowed;
        pointer-events: none;
        &:hover {
          background-color: transparent;
        }
      }
    }
    &-tertiary {
      @include theme-prop(color, primary-text-color);
      background-color: transparent;

      &.monday-style-button {
        &--color {
          &-primary {
            &-active,
            &:hover,
            &:focus {
              @include theme-prop(
                background-color,
                primary-background-hover-color
              );
            }
          }
          &-positive {
            @include theme-prop(color, positive-color);
            &-active,
            &:hover,
            &:focus {
              @include theme-prop(background-color, positive-color-selected);
            }
          }
          &-negative {
            @include theme-prop(color, negative-color);
            &-active,
            &:hover,
            &:focus {
              @include theme-prop(background-color, negative-color-selected);
            }
          }
          &-on-primary-color {
            @include theme-prop(color, text-color-on-primary);
            &-active,
            &:hover,
            &:focus {
              backdrop-filter: brightness(85%);
            }
          }
        }
      }
      &:disabled {
        @include theme-prop(color, disabled-text-color);
        cursor: not-allowed;
        pointer-events: none;
        &:hover {
          background-color: transparent;
        }
      }
    }
  }

  &--no-side-padding {
    padding-right: 0;
    padding-left: 0;
  }
}