// Import default component's file with styles
@import '../../../../components/button/style';

.st-button {
  $root: &;

  min-width: auto;
  height: 42px;
  padding: auto;
  text-align: center;
  letter-spacing: normal;
  cursor: pointer;
  background: transparent;
  border: 1px solid $st-color-primary;
  border-radius: 21px;
  outline: none;

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

  &:active {
    color: $st-color-white;
    background-color: $st-color-primary-active;
    border-color: $st-color-primary-active;
  }

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

  #{$root}__icon {
    color: currentColor;
  }

  &--round {
    &#{$root}--small {
      padding: 0 12px;
    }

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

  &--default,
  &--primary {
    color: $st-color-white;
    background-color: $st-color-primary;

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

    &:active {
      color: $st-color-white;
      background-color: $st-color-primary-active;
      border-color: $st-color-primary-active;
    }

    &:disabled {
      color: $st-color-white;
      background-color: $st-color-primary;
      border-color: $st-color-primary;
    }
  }

  &--success {
    color: $st-color-success;
    border-color: $st-color-success;

    &:hover,
    &:focus {
      color: $st-color-white;
      background-color: mix($st-color-black, $st-color-success, 10);
      border-color: mix($st-color-black, $st-color-success, 10);
    }

    &:active {
      color: $st-color-white;
      background-color: mix($st-color-black, $st-color-success, 20);
      border-color: mix($st-color-black, $st-color-success, 20);
    }
  }

  &--info {
    color: $st-color-primary;
    border-color: $st-color-primary;

    &:hover,
    &:focus {
      color: $st-color-white;
      background-color: mix($st-color-black, $st-color-primary, 10);
      border-color: mix($st-color-black, $st-color-primary, 10);
    }

    &:active {
      color: $st-color-white;
      background-color: mix($st-color-black, $st-color-primary, 20);
      border-color: mix($st-color-black, $st-color-primary, 20);
    }

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

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

  &--secondary {
    color: $color-tooltip-color;
    background-color: $st-color-gray-light;
    border-color: $st-color-gray-light;

    &:hover {
      color: $color-tooltip-color;
      background-color: $st-color-dark-gray;
      border-color: $st-color-gray-light;
    }

    &:not(#{$root}--disabled)#{$root}--plain {
      color: $color-tooltip-color;
      background-color: transparent;
      border-color: $st-color-dark-gray;

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

  &--warning {
    color: $st-color-warning;
    border-color: $st-color-warning;

    &:hover,
    &:focus {
      color: $st-color-white;
      background-color: mix($st-color-black, $st-color-warning, 10);
      border-color: mix($st-color-black, $st-color-warning, 10);
    }

    &:active {
      color: $st-color-white;
      background-color: mix($st-color-black, $st-color-warning, 20);
      border-color: mix($st-color-black, $st-color-warning, 20);
    }
  }

  &--danger {
    color: white;
    background-color: $st-color-error;
    border-color: $st-color-error;

    &:hover,
    &:focus {
      color: $st-color-white;
      background-color: mix($st-color-black, $st-color-error, 10);
      border-color: mix($st-color-black, $st-color-error, 10);
    }

    &:active {
      color: $st-color-white;
      background-color: mix($st-color-black, $st-color-error, 20);
      border-color: mix($st-color-black, $st-color-error, 20);
    }
  }

  &--remove {
    color: $st-color-error;
    border-color: $st-color-error;

    &:hover,
    &:focus {
      color: $st-color-white;
      background-color: mix($st-color-black, $st-color-error, 10);
      border-color: mix($st-color-black, $st-color-error, 10);
    }

    &:active {
      color: $st-color-white;
      background-color: mix($st-color-black, $st-color-error, 20);
      border-color: mix($st-color-black, $st-color-error, 20);
    }
  }

  &--cancel {
    color: $st-color-dark-gray;
    border-color: $st-color-dark-gray;

    &:hover,
    &:focus {
      color: $st-color-white;
      background-color: mix($st-color-black, $st-color-dark-gray, 10);
      border-color: mix($st-color-black, $st-color-dark-gray, 10);
    }

    &:active {
      color: $st-color-white;
      background-color: mix($st-color-black, $st-color-dark-gray, 20);
      border-color: mix($st-color-black, $st-color-dark-gray, 20);
    }
  }

  &--small,
  &--mini {
    height: 32px;
  }

  &--text {
    padding: 0;
    border: none;

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

    &:not(#{$root}--disabled):active {
      color: $st-color-primary-hover;
    }
  }

  &--circle {
    width: 42px;
    padding: 0;

    #{$root}__icon {
      margin: 0;
    }
  }
}