@import '../../assets/scss/utils/helper-classes';
@import '../../assets/scss/components/button/mixins';
@import '../../assets/scss/components/button/variables';

.st-button {
  $root: &;

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin: 0;
  font-weight: $st-button-font-weight;
  line-height: 1;
  color: $st-color-mantis;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  background: $st-button-default-fill;
  border: $st-border-width $st-border-style $st-color-mantis;
  -webkit-appearance: none;
  outline: none;
  transition: 0.1s;

  @include utils-user-select(none);
  @include button-size(0, $st-button-padding-horizontal, $st-button-font-size, $st-button-border-radius, $root);

  &::-moz-focus-inner {
    border: 0;
  }

  & + & {
    margin-left: 10px;
  }

  &:hover,
  &:focus {
    color: $st-color-white;
    background-color: $st-color-white;
  }

  &:active {
    color: mix($st-color-black, $st-color-primary, $st-button-active-shade-percent);
    border-color: mix($st-color-black, $st-color-primary, $st-button-active-shade-percent);
    outline: none;
  }

  #{$root}__icon {
    width: 16px;
    height: 16px;
    line-height: 16px;
    color: currentColor;

    + #{$root}__content {
      margin-left: 8px;
    }
  }

  &--plain {
    background-color: $st-color-white-smoke;

    &:hover,
    &:focus {
      color: $st-color-white;
      background-color: $st-color-mantis;
    }

    &:active {
      color: mix($st-color-black, $st-color-primary, $st-button-active-shade-percent);
      background: $st-color-white;
      border-color: mix($st-color-black, $st-color-primary, $st-button-active-shade-percent);
      outline: none;
    }
  }

  &--default {
    @include button-variant($st-button-default-color, $st-button-default-fill, $st-button-default-border, $root);

    min-width: 192px;

    &#{$root}--plain {
      color: $st-color-taupe-gray;
      border-color: $st-color-white-smoke;

      &:hover,
      &:focus {
        color: $st-color-taupe-gray;
      }
    }

    &#{$root}--disabled,
    &#{$root}--disabled:hover {
      color: mix($st-color-taupe-gray, $st-color-white);
      border-color: mix($st-color-white-smoke, $st-color-white);

      &#{$root}--plain {
        color: mix($st-color-taupe-gray, $st-color-white);
        background-color: $st-button-default-fill;
        border-color: mix($st-color-white-smoke, $st-color-white);
      }
    }

    &:hover,
    &#{$root}--plain:hover {
      color: $st-color-taupe-gray;
      background-color: $st-color-white;
      border-color: $st-color-white-smoke;
    }
  }

  &--primary {
    min-width: 226px;
    height: 48px;

    @include button-variant($st-button-primary-color, $st-button-primary-fill, $st-button-primary-border, $root);

    &:hover,
    &#{$root}--plain:hover {
      color: $st-color-mantis;
      background-color: $st-color-white;
    }
  }

  &--secondary {
    min-width: 192px;
    border-radius: $st-button-secondary-border-radius;

    &:focus {
      color: $st-color-white;
      background-color: mix($st-color-mantis, $st-color-white, 80%);
    }

    &:hover {
      color: $st-color-white;
      background-color: $st-color-mantis;
    }

    &#{$root}--plain {
      &#{$root}--disabled {
        background-color: mix($st-color-white-smoke, $st-color-white, 20%);
      }
    }

    &#{$root}--cancel {
      color: $st-color-taupe-gray;
      border-color: $st-color-pastel-gray;

      &:not(#{$root}--disabled) {
        &:focus,
        &:hover {
          color: $st-color-white;
        }

        &:focus {
          background-color: mix($st-color-pastel-gray, $st-color-white, 80%);
        }

        &:hover {
          background-color: $st-color-pastel-gray;
          border-color: $st-color-pastel-gray;
        }
      }

      &#{$root}--plain {
        background-color: mix($st-color-pastel-gray, $st-color-white, 10%);
      }

      &#{$root}--disabled {
        &,
        &:hover,
        &:focus {
          color: mix($st-color-taupe-gray, $st-color-white);
          border-color: mix($st-color-pastel-gray, $st-color-white);
        }

        &#{$root}--plain {
          background-color: mix($st-color-pastel-gray, $st-color-white, 10%);
        }
      }
    }

    &#{$root}--remove {
      color: $st-color-sunset-orange;
      border-color: $st-color-sunset-orange;

      &:not(#{$root}--disabled):focus {
        color: $st-color-white;
        background-color: mix($st-color-sunset-orange, $st-color-white, 80%);
      }

      &:not(#{$root}--disabled):hover {
        color: $st-color-white;
        background-color: $st-color-sunset-orange;
        border-color: $st-color-sunset-orange;
      }

      &#{$root}--plain {
        background-color: mix($st-color-sunset-orange, $st-color-white, 10%);
      }

      &#{$root}--disabled {
        &,
        &:hover,
        &:focus {
          color: mix($st-color-sunset-orange, $st-color-white);
          border-color: mix($st-color-sunset-orange, $st-color-white);
        }

        &#{$root}--plain {
          background-color: mix($st-color-sunset-orange, $st-color-white, 10%);
        }
      }
    }
  }

  &--success {
    @include button-variant($st-button-success-color, $st-button-success-fill, $st-button-success-border, $root);
  }

  &--warning {
    @include button-variant($st-button-warning-color, $st-button-warning-fill, $st-button-warning-border, $root);
  }

  &--danger {
    @include button-variant($st-button-danger-color, $st-button-danger-fill, $st-button-danger-border, $root);
  }

  &--info {
    @include button-variant($st-button-info-color, $st-button-info-fill, $st-button-info-border, $root);

    &:not(#{$root}--disabled):focus {
      color: mix($st-color-blueberry, $st-color-white, 80%);
      background-color: $st-color-white;
      border-color: mix($st-color-blueberry, $st-color-white, 40%);
    }

    &:not(#{$root}--disabled):hover {
      background-color: $st-color-white;
      border-color: $st-color-blueberry;
    }

    &#{$root}--disabled {
      &,
      &:hover {
        color: mix($st-color-blueberry, $st-color-white, 50%);
        background-color: transparent;
        border-color: transparent;
      }

      &#{$root}--plain,
      &#{$root}--plain:hover {
        color: mix($st-color-blueberry, $st-color-white, 40%);
        background-color: mix($st-color-blueberry, $st-color-white, 10%);
        border-color: mix($st-color-blueberry, $st-color-white, 30%);
      }
    }

    &:not(#{$root}--disabled)#{$root}--plain {
      color: $st-color-blueberry;
      background-color: mix($st-color-blueberry, $st-color-white, 20%);
      border-color: mix($st-color-blueberry, $st-color-white, 40%);

      &:hover {
        background-color: $st-color-white;
        border-color: $st-color-blueberry;
      }
    }
  }

  &--extra-large {
    min-width: 322px;
    height: 48px;
    line-height: 48px;

    @include button-size(0, 27px, 15px, $st-button-large-border-radius, $root);
  }

  &--large {
    min-width: 322px;
    height: 40px;
    line-height: 40px;

    @include button-size(0, $st-button-large-padding-horizontal, $st-button-large-font-size, $st-button-large-border-radius, $root);
  }

  &--medium {
    min-width: 226px;

    @include button-size($st-button-medium-padding-vertical, $st-button-medium-padding-horizontal, $st-button-medium-font-size, $st-button-medium-border-radius, $root);
  }

  &--small {
    min-width: 192px;

    @include button-size($st-button-small-padding-vertical, $st-button-small-padding-horizontal, $st-button-small-font-size, $st-button-small-border-radius, $root);
  }

  &--mini {
    min-width: 166px;

    @include button-size($st-button-mini-padding-vertical, $st-button-mini-padding-horizontal, $st-button-mini-font-size, $st-button-mini-border-radius, $root);
  }

  &--text {
    padding-right: 0;
    padding-left: 0;
    color: mix($st-color-taupe-gray, $st-color-white, 50%);
    background: transparent;
    border-color: transparent;

    &:not(#{$root}--disabled):hover,
    &:not(#{$root}--disabled):focus {
      color: mix($st-color-taupe-gray, $st-color-white, 80%);
      background-color: transparent;
      border-color: transparent;
    }

    &:not(#{$root}--disabled):active {
      color: $st-color-taupe-gray;
      background-color: transparent;
      border-color: transparent;
    }

    &#{$root}--disabled,
    &#{$root}--disabled:hover,
    &#{$root}--disabled:focus {
      color: mix($st-color-taupe-gray, $st-color-white, 40%);
      border-color: transparent;
    }

    &:not(#{$root}--disabled)#{$root}--search {
      &:focus {
        color: mix($st-text-color-regular, $st-color-white, 40%);
      }

      &:hover {
        color: $st-color-blueberry;
      }

      &:active {
        color: $st-text-color-regular;
      }
    }
  }

  &--active {
    color: mix($st-color-black, $st-color-primary, $st-button-active-shade-percent);
    border-color: mix($st-color-black, $st-color-primary, $st-button-active-shade-percent);
  }

  &--disabled {
    &,
    &:hover,
    &:focus {
      color: mix($st-color-white, $st-color-primary, 50%);
      cursor: not-allowed;
      background-color: $st-color-white;
      background-image: none;
      border-color: mix($st-color-white, $st-color-primary, 50%);
    }

    &#{$root}--text {
      background-color: transparent;
    }
  }

  &--loading {
    position: relative;
    min-width: 192px;
    padding-top: 11px;
    padding-bottom: 11px;
    pointer-events: none;

    &:not(#{$root}--disabled)::before {
      position: absolute;
      top: -1px;
      right: -1px;
      bottom: -1px;
      left: -1px;
      pointer-events: none;
      content: '';
      background-color: rgba(255, 255, 255, 0.35);
      border-radius: inherit;
    }
  }

  &--round {
    padding: 12px 23px;
    border-radius: 20px;

    &#{$root}--primary {
      padding-top: 16px;
      padding-bottom: 16px;
    }
  }

  &--circle {
    width: 40px;
    min-width: auto;
    padding: 0;
    line-height: 38px;
    text-align: center;
    border-radius: $st-border-radius-circle;

    #{$root}__icon {
      width: 18px;
      height: 18px;
      font-size: 24px;
      line-height: 0;
    }
  }

  &--bold-border {
    line-height: 36px;
    border-width: 2px;
  }
}