/*
  Button Styles
  ------------------------------------------------------------------------------
*/

.button {
  font-weight: 700;
  font-family: $ix-text-font;
  border-style: solid;
  border-width: $ix-border;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    color 0.25s ease;
  outline: none;
  border-radius: $radius;
  white-space: nowrap;
  @extend %no-user-select;

  &:hover {
    cursor: pointer;
  }

  &[disabled]:hover {
    cursor: default;
  }
}

.button-icon {
  margin-right: 0.4em;
  margin-left: -0.1em;
  display: inline-block;
  vertical-align: middle;
  transform: translateY(-5%);
  pointer-events: none;
}

/*
  Size Modifiers
  ------------------------------------------------------------------------------
*/
@mixin buttonSizeModifier($fontSize, $padding, $height) {
  font-size: $fontSize;
  padding: 0 $padding;
  height: $height;
  line-height: $height - ($ix-border * 2);

  .button-spinner {
    width: $height * 0.5;
    height: $height * 0.5;
  }

  .button-icon {
    font-size: floor($fontSize * 1.25);
  }
}

.button-xs {
  @include buttonSizeModifier($form-xs-font, $form-xs-padding, $form-xs-height);
}
.button-sm {
  @include buttonSizeModifier($form-sm-font, $form-sm-padding, $form-sm-height);
}
.button-md {
  @include buttonSizeModifier($form-md-font, $form-md-padding, $form-md-height);
}
.button-lg {
  @include buttonSizeModifier($form-lg-font, $form-lg-padding, $form-lg-height);
}

/*
  Shape Modifiers
  ------------------------------------------------------------------------------
*/
.button-square {
  padding: 0;
  text-align: center;

  &.button-xs {
    width: $form-xs-height;
  }
  &.button-sm {
    width: $form-sm-height;
  }
  &.button-md {
    width: $form-md-height;
  }
  &.button-lg {
    width: $form-lg-height;
  }

  .button-icon {
    margin: 0;
  }
}

.button-stretch {
  width: 100%;
}

/*
  Color Modifiers
  ------------------------------------------------------------------------------
*/
@mixin buttonColorModifier($bg, $bgHover, $bgActive, $text, $textHover) {
  color: $text;
  background-color: $bg;
  border-color: $bg;

  &:hover {
    color: $textHover;
    background-color: $bgHover;
    border-color: $bgHover;
  }

  &:active,
  &:active:hover,
  &.active,
  &.active:hover {
    color: $textHover;
    background-color: $bgHover;
    border-color: $bgActive;
    box-shadow: 0 0 4px 1px $bg;
  }

  &.button--loading,
  &.button--loading:hover {
    background-color: $bgHover;
    border-color: $bgHover;
    box-shadow: 0 0 0 0;
  }

  &.button--disabled,
  &.button--disabled:hover {
    color: rgba($text, 0.3);
    font-style: italic;
    background-color: mix($bg, $g4-onyx, 25%);
    border-color: mix($bg, $g4-onyx, 25%);
  }

  .button-spinner {
    border-color: rgba($text, 0.25);
    border-top-color: $text;
  }
}

.button-default {
  @include buttonColorModifier($g5-pepper, $g6-smoke, $g7-graphite, $g14-chromium, $g18-cloud);
}
.button-primary {
  @include buttonColorModifier($c-pool, $c-laser, $c-hydrogen, $c-yeti, $g20-white);
}
.button-secondary {
  @include buttonColorModifier($c-star, $c-comet, $c-potassium, $c-twilight, $g20-white);
}
.button-success {
  @include buttonColorModifier($c-rainforest, $c-honeydew, $c-wasabi, $c-mint, $g20-white);
}
.button-warning {
  @include buttonColorModifier($c-pineapple, $c-thunder, $c-daisy, $g20-white, $g20-white);
}
.button-danger {
  @include buttonColorModifier($c-curacao, $c-dreamsicle, $c-tungsten, $g20-white, $g20-white);
}

/*
  Loading State
  ------------------------------------------------------------------------------
*/
.button--loading,
.button--loading:hover,
.button--loading:active,
.button--loading:active:hover,
.button--loading[disabled],
.button--loading[disabled]:hover {
  color: transparent;
  position: relative;
}

/*
  Loading Spinner
  ------------------------------------------------------------------------------
*/

@keyframes ButtonSpinner {
  0% {
    transform: translate(-50%,-50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%,-50%) rotate(360deg);
  }
}

.button-spinner {
  pointer-events: none;
  border-style: solid;
  border-radius: 50%; 
  animation-duration: 0.85s;
  animation-name: ButtonSpinner;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  border-width: $ix-border;
}
