@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-button-text-color: $ink-color-text !default;
$ink-button-text-inverse-color: $ink-color-white !default;
$ink-button-height: 88px !default;
$ink-button-font-size: $ink-font-size-md !default;
$ink-button-border-radius: $ink-border-radius-sm !default;
$ink-button-active-opacity: $ink-opacity-active !default;
$ink-button-disabled-opacity: $ink-opacity-disabled !default;
$ink-button-small-height: 64px !default;
$ink-button-small-font-size: $ink-font-size-sm !default;
$ink-button-primary-color: $ink-color-brand !default;
$ink-button-info-color: $ink-color-info !default;
$ink-button-danger-color: $ink-color-error !default;

.ink-button {
  @include line();
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 0 $ink-spacing-md;
  height: $ink-button-height;
  font-size: $ink-button-font-size;
  line-height: $ink-button-height;
  text-align: center;
  border-radius: $ink-button-border-radius;
  border: $ink-one-px solid $ink-color-border;
  box-sizing: border-box;

  &:active {
    opacity: $ink-button-active-opacity;
  }

  &__icon {
    display: flex;
    align-items: center;
    margin: 0 24px;
  }

  &__text {
    display: inline;
  }

  &__button {
    position: absolute;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    color: $ink-button-text-color;
    opacity: 0;
    z-index: 1;

    &:not([disabled]):active,
    &:active {
      background-color: transparent;
      color: inherit;
    }

    &::after {
      display: none;
    }
  }

  &--active {
    opacity: $ink-button-active-opacity;
  }

  &--disabled {
    opacity: $ink-button-disabled-opacity;

    &:active {
      opacity: $ink-button-disabled-opacity;
    }
  }

  &__loading {
    &--ring {
      border: $ink-one-px solid $ink-button-primary-color;
      border-color: $ink-button-primary-color transparent transparent transparent;
    }
  }

  &--primary {
    color: $ink-color-text-inverse;
    border: $ink-one-px solid $ink-button-primary-color;
    background: $ink-button-primary-color;

    .ink-loading__spin {
      border-color: $ink-color-white $ink-color-white transparent;
    }

    &.ink-button--plain {
      background: $ink-color-white;
      color: $ink-button-primary-color;

      .ink-loading__spin {
        border-color: $ink-button-primary-color $ink-button-primary-color transparent;
      }
    }
  }

  &--info {
    color: $ink-button-text-inverse-color;
    border: $ink-one-px solid $ink-button-info-color;
    background-color: $ink-button-info-color;

    .ink-loading__spin {
      border-color: $ink-color-white $ink-color-white transparent;
    }

    &.ink-button--plain {
      background: $ink-color-white;
      color: $ink-button-info-color;

      .ink-loading__spin {
        border-color: $ink-button-info-color $ink-button-info-color transparent;
      }
    }
  }

  &--danger {
    color: $ink-button-text-inverse-color;
    border: 1px solid $ink-button-danger-color;
    background: $ink-button-danger-color;

    .ink-loading__spin {
      border-color: $ink-color-white $ink-color-white transparent;
    }

    &.ink-button--plain {
      background: $ink-color-white;
      color: $ink-button-danger-color;

      .ink-loading__spin {
        border-color: $ink-button-danger-color $ink-button-danger-color transparent;
      }
    }
  }

  &--round {
    border-radius: $ink-button-height / 2;
    background-clip: border-box;
    overflow: hidden;
  }

  &--small {
    padding: 0 $ink-spacing-xs;
    width: auto;
    min-width: 100px;
    max-width: 710px;
    height: $ink-button-small-height;
    font-size: $ink-button-small-font-size;
    line-height: $ink-button-small-height;

    &.ink-button--round {
      border-radius: $ink-button-small-height / 2;
    }
  }

  &--full {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}