/**
 * Button Style
 */


$btn-hover-tint-percent: 15%;
$btn-active-shade-percent: 10%;

@mixin button-status($border-color, $background-color) {
  border-color: $border-color;
  background-color: $background-color;

  &:hover {
    background-color: tint($background-color, $btn-hover-tint-percent);
    border-color: tint($background-color, $btn-hover-tint-percent);
  }
  &:active {
    background-color: shade($background-color, $btn-active-shade-percent);
    border-color: shade($background-color, $btn-active-shade-percent);
  }
}

@mixin button-hollow-status($text-color, $border-color) {
  background: none;
  color: $text-color;

  &:hover {
    background: none;
    color: tint($text-color, $btn-hover-tint-percent);
    border-color: tint($border-color, $btn-hover-tint-percent);
  }
  &:active {
    background: none;
    color: tint($text-color, $btn-active-shade-percent);
    border-color: tint($border-color, $btn-active-shade-percent);
  }
}

.at-btn {
  display: inline-block;
  padding: $btn-padding-base;
  font-size: 0;
  outline: 0;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  border: 1px solid $btn-default-border;
  border-radius: $border-radius-base;
  background-color: $btn-default-bg;
  transition: background 0.2s;
  user-select: none;
  cursor: pointer;

  &:hover {
    background-color: $btn-default-bg-hover;
  }
  &:active {
    background-color: $btn-default-bg-active;
  }
  &:disabled,
  &:disabled:hover,
  &:disabled:active{
    cursor: not-allowed;
    color: $btn-disabled-color;
    border-color: $btn-disabled-border;
    background-color: $btn-disabled-bg;
  }

  /* modifier */
  &--primary,
  &--success,
  &--error,
  &--warning,
  &--info {
    color: $color-white;
  }
  &--default {
    &--hollow {
      @include button-hollow-status($text-color, $btn-default-border);
    }
  }
  &--primary {
    @include button-status($btn-primary-border, $btn-primary-bg);

    &--hollow {
      @include button-hollow-status($color-primary, $btn-primary-border);
    }
  }
  &--success {
    @include button-status($btn-success-border, $btn-success-bg);

    &--hollow {
      @include button-hollow-status($color-success, $btn-success-border);
    }
  }
  &--error {
    @include button-status($btn-error-border, $btn-error-bg);

    &--hollow {
      @include button-hollow-status($color-error, $btn-error-border);
    }
  }
  &--warning {
    @include button-status($btn-warning-border, $btn-warning-bg);

    &--hollow {
      @include button-hollow-status($color-warning, $btn-warning-border);
    }
  }
  &--info {
    @include button-status($btn-info-border, $btn-info-bg);

    &--hollow {
      @include button-hollow-status($color-info, $btn-info-border);
    }
  }
  &--text {
    @include button-hollow-status($btn-text-border, transparent);
    color: $text-color;
    border: none;

    &:disabled,
    &:disabled:hover,
    &:disabled:active {
      background: none;
    }
  }
  &--default,
  &--primary,
  &--success,
  &--error,
  &--warning,
  &--info,
  &--text {
    &--hollow {
      &:disabled,
      &:disabled:hover,
      &:disabled:active {
        background: none;
      }
    }
  }
  &--large {
    font-size: $btn-font-size-lg;
    padding: $btn-padding-lg;

    &.at-btn--circle {
      width: $btn-circle-size-lg;
      height: $btn-circle-size-lg;

      .at-btn__icon {
        font-size: $btn-font-size-lg;
      }
    }
    .at-btn__text {
      font-size: $btn-font-size-md;
    }
  }
  &--small {
    font-size: $btn-font-size-sm;
    padding: $btn-padding-sm;

    &.at-btn--circle {
      width: $btn-circle-size-sm;
      height: $btn-circle-size-sm;

      .at-btn__icon {
        font-size: $btn-font-size-sm;
      }
    }
    .at-btn__text {
      font-size: $btn-font-size-sm;
    }
  }
  &--smaller {
    font-size: $btn-font-size-smer;
    padding: $btn-padding-smer;

    &.at-btn--circle {
      width: $btn-circle-size-smer;
      height: $btn-circle-size-smer;

      .at-btn__icon {
        font-size: $btn-font-size-smer;
      }
    }
    .at-btn__text {
      font-size: $btn-font-size-smer;
    }
  }
  &--circle {
    width: $btn-circle-size;
    height: $btn-circle-size;
    padding: 0;
    border-radius: 50%;

    .at-btn__icon {
      font-size: 14px;
    }
  }

  /* element */
  &__icon,
  &__loading {
    font-size: $btn-font-size-base;
    line-height: 1.5;

    + span {
      margin-left: 4px;
    }
  }
  &__loading {
    display: inline-block;
    line-height: 1;
    animation: loadingCircle 1s linear infinite;
  }
  &__text {
    font-size: $btn-font-size-base;
  }
}

.at-btn-group {
  font-size: 0;
  display: inline-block;

  .at-btn {
    border-radius: 0;

    &:not(:last-child) {
      margin-right: -1px;
    }
    &:first-child {
      border-radius: $border-radius-base 0 0 $border-radius-base;
    }
    &:last-child {
      border-radius: 0 $border-radius-base $border-radius-base 0;
    }
  }
}

@keyframes loadingCircle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(1turn);
  }
}