@import '../../styles/variables';
@import '../../styles/mixins';

.Button {
  display: inline-block;
  font-weight: 300;
  cursor: pointer;
  height: $line-height;
  line-height: $line-height;
  font-size: $font-normal;
  padding: 0 16px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 0;
  border-radius: $border-radius;
  transition: background-color 0.1s linear 0s, border-color 0.1s linear 0s;
  outline: none;

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

  &_primary {
    @include button-color($action-color, $white)
  }

  &_secondary {
    @include button-color($white, $gray20);
  }

  &_advanced {
    @include button-color($white, $action-color, $action-color, $action-color);
  }

  &_success {
    @include button-color($success-color, $white)
  }

  &_danger {
    @include button-color($error-color, $white)
  }

  &_big {
    height: $line-height*2;
    line-height: $line-height*2;
    padding: 0 24px;
    font-size: $font-normal-big;

    &:disabled {
      opacity: 1;
    }
  }

  &_link {
    @include button-color(transparent, $action-color);

    padding: 0;

    &:hover {
      color: darken($action-color, 30%);
    }
  }

  &_inline {
    height: auto;
    padding: 0;
    background: transparent;
    color: $action-color;
    border-bottom: 1px dotted $action-color;
    border-radius: 0;
    line-height: 1;

    &:hover {
      border-bottom-color: transparent;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: .65;
      &:hover {
        border-bottom-color: inherit;
      }
    }
  }

  &_block {
    display: block;
    width: 100%;
  }

  &_large {
    height: $line-height + 8px;
    line-height: $line-height + 8px;
    font-size: $font-normal + 2px;
    padding: 0 24px;
  }

  .button-group & {
    border-radius: 0;
    &:not(:first-child) {
      margin-left: -1px;
    }

    &:first-child {
      border-radius: $border-radius 0 0 $border-radius;
    }

    &:last-child {
      border-radius: 0 $border-radius $border-radius 0;
    }

    &:hover {
      z-index: 1;
    }
  }

  &.loading {
    cursor: progress !important;
    position: relative;
    color: transparent;
    pointer-events: none;

    &:before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      margin-top: -($line-height - 12px) / 2;
      margin-left: -($line-height - 12px) / 2;
      height: $line-height - 12px;
      width: $line-height - 12px;
      border: 3px solid;
      border-color: $white mix($white, $black, 80%) mix($white, $black, 80%);
      border-radius: 50%;
      animation: spin 0.5s linear infinite;
    }
  }

  &__icon {
    margin-right: $spacing;
    display: inline-block;
    top: $spacing - 2;
    position: relative;
  }
}