$size-loading-icon: point(3);

$color-lighten-hover: 10 !default;
$color-darken-hover: 10 !default;

$button-props: (
  success: $color-action-success,
  danger: $color-action-error,
);

.tao__btn {
  border: none;
  transition-duration: $transition-sm-slow;
  transition-property: box-shadow, background, color, border-radius, opacity, border-color;
  transition-timing-function: $transition-easing-default;
  span {
    vertical-align: middle;
    + .tao__icon {
      margin-right: - $spacing-margin-xxsmall;
      margin-left: $spacing-margin-xxxsmall;
    }
  }
  .tao__icon:first-child {
    margin-left: - $spacing-margin-xxsmall;
    margin-right: $spacing-margin-xxsmall;
  }
  &::after {
    content: '';
    position: absolute;
    display: block;
    transform-origin: top left;
    transform: translateX(-50%) translateY(-50%);
    opacity: 0;
    top: 50%;
    left: 50%;
    height: $size-loading-icon;
    width: $size-loading-icon;
    min-height: $size-loading-icon;
    min-width: $size-loading-icon;
    z-index: 9;
    transition: opacity $transition-sm-fast $transition-easing-default;
    border: $border-width-default solid $color-ui-lighter;
    border-radius: $border-radius-circle;
    border-right-color: $color-ui-transparent;
    border-top-color: $color-ui-transparent;
  }
  &:focus {
    outline: none;
  }
  &:disabled {
    cursor: not-allowed;
    opacity: $opacity-medium-half;
  }
  &:enabled, &:enabled .tao__btn-loading {
    &:hover {
      @if contrast-ratio($color-brand-button, $color-ui-lighter)
        > contrast-ratio($color-brand-button, $color-ui-darker)  {
        background: lighten($color-brand-button, $color-lighten-hover);
      } @else {
        background: darken($color-brand-button, $color-darken-hover);
      }
    }
    &:focus {
      @if contrast-ratio($color-brand-button, $color-ui-lighter)
        > contrast-ratio($color-brand-button, $color-ui-darker)  {
        background: darken($color-brand-button, $color-darken-hover / 2);
      } @else {
        background: lighten($color-brand-button, $color-lighten-hover / 2);
      }
    }
  }
  &-secondary {
    border: $border-width-default solid rgba($color-text-03, $opacity-medium-half);
    background: rgba($color-text-03, $opacity-low-minimum);
    &:enabled {
      &:hover {
        background: rgba($color-text-03, $opacity-low-half);
      }
      &:focus, &:active {
        background: rgba($color-text-03, $opacity-low-maximum);
      }
      @each $prop, $color in $button-props {
        &.tao__btn-#{$prop} {
          color: $color !important;
          border-color: rgba($color, $opacity-low-half);
          background-color: rgba($color, $opacity-low-half);
          &:enabled {
            &:hover{
              border-color: rgba($color, $opacity-low-maximum);
              background-color: rgba($color, $opacity-low-half);
            }
            &:focus {
              border-color: rgba($color, $opacity-low-maximum);
              background-color: rgba($color, $opacity-low-maximum);
            }
          }
        }
      }
    }
  }
  &-tertiary {
    &:enabled {
      &:hover {
        background: rgba($color-ui-darker, $opacity-low-minimum);
      }
      &:focus, &:active {
        background: rgba($color-ui-darker, $opacity-low-half);
      }
    }
    &:disabled {
      background: rgba($color-ui-darker, $opacity-low-minimum);
      &:not(.tao__btn-loading) {
        color: $color-text-03;
      }
    }
  }
  &-colored {
    &.tao__btn-secondary {
      border-color: rgba($color-brand-button, $opacity-low-half);
      background-color: rgba($color-brand-button, $opacity-low-half);
      &:enabled {
        &:hover {
          border-color: rgba($color-brand-button, $opacity-low-maximum);
          background-color: rgba($color-brand-button, $opacity-low-half);
        }
        &:focus, &:active {
          border-color: rgba($color-brand-button, $opacity-low-maximum);
          background-color: rgba($color-brand-button, $opacity-low-maximum);
        }
      }
    }
  }
  @each $prop, $color in $button-props {
    &-#{$prop} {
      background: $color;
      &:enabled {
        &:hover{
          background: lighten($color, $color-lighten-hover);
        }
        &:focus {
          background: darken($color, $color-darken-hover);
        }
      }
    }
  }
  &-loading {
    color: transparent;
    &::after {
      content: '';
      animation: loading $transition-bounce-fast infinite linear;
      opacity: $opacity-full;
    }
    &.tao__btn-secondary {
      background: $color-text-01;
      border-color: $color-text-01;
      &.tao__btn-colored {
        background: $color-brand-button;
        border-color: $color-brand-button;
      }
    }
    &.tao__btn-tertiary {
      &::after {
        border-color: $color-text-02;
      }
    }
    &.tao__btn-secondary, &.tao__btn-tertiary {
      &::after {
        border-right-color: $color-ui-transparent;
        border-top-color: $color-ui-transparent;
      }
    }
  }
}

@keyframes loading {
  0% {
    transform: rotateZ(0deg) translateX(-50%) translateY(-50%);
  }
  25% {
    transform: rotateZ(90deg) translateX(-50%) translateY(-50%);
  }
  75% {
    transform: rotateZ(270deg) translateX(-50%) translateY(-50%);
  }
  100% {
    transform: rotateZ(360deg) translateX(-50%) translateY(-50%);
  }
}