@import '../../../../style/variables.scss';

/*
  Button Styles
  ------------------------------------------------------------------------------
*/
.cf-button {
  font-weight: $cf-font-weight--medium;
  font-family: $cf-text-font;
  border-style: solid;
  border-width: 0;
  text-decoration: none;
  transition: background-color $cf-transition-default,
    box-shadow $cf-transition-default, color $cf-transition-default;
  outline: none;
  border-radius: $cf-radius;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;

  @extend %no-user-select;

  & > span {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &:not(.cf-dropdown--button) {
    @extend %type-uppercase;
  }

  &:after {
    @include createOverlayBase();
  }

  &:hover {
    cursor: pointer;
  }

  &:not([disabled]):hover:after {
    opacity: $cf-hover-active-opacity;
  }

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

.cf-button-icon {
  margin-right: 0.6em;
  margin-left: 0;
  display: inline-block;
  pointer-events: none;

  .cf-button--label + & {
    margin-right: 0;
    margin-left: 0.6em;
  }

  &:only-child {
    margin: 0;
  }
}

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

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

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

/*
  Shape Modifiers
  ------------------------------------------------------------------------------
*/
.cf-button-square {
  padding: 0;
  letter-spacing: 0;
  line-height: 1;
  flex-shrink: 0;

  & > * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: $cf-space-3xs;
  }

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

.cf-button-stretch {
  width: 100%;
}

/*
  Color Modifiers
  ------------------------------------------------------------------------------
*/
@mixin buttonColorModifier($bgA, $bgB, $text, $textHover, $tertiary: false) {
  color: $text;
  @include gradient-diag-up($bgA, $bgB);

  &:hover {
    color: $textHover;
  }

  &:focus {
    @include focus-shadow();
  }

  @if $tertiary {
    &:active,
    &:focus,
    &:active:hover,
    &.active,
    &.active:hover {
      color: $textHover;
    }
    &:focus,
    &.active:hover {
      &:after {
        opacity: $cf-hover-active-opacity;
      }
    }
  } @else {
    &:active,
    &:focus,
    &:active:hover,
    &.active,
    &.active:hover {
      color: $textHover;

      &:after {
        opacity: $cf-hover-active-opacity;
      }
    }
  }

  &.cf-button--loading,
  &.cf-button--loading:hover {
    box-shadow: 0 0 0 0;
  }

  &.cf-button--disabled,
  &.cf-button--disabled:hover,
  &.cf-button--disabled:focus {
    cursor: not-allowed;
    opacity: $cf-disabled-opacity;
  }

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

.cf-button-default,
.cf-button-secondary {
  @include buttonColorModifier(
    $cf-button-default-bg,
    $cf-button-default-bg,
    $cf-white,
    $cf-white
  );
}

.cf-button-primary,
.cf-button-success {
  @include buttonColorModifier($c-pool, $c-pulsar, $cf-white, $cf-white);
}

.cf-button-tertiary {
  @include buttonColorModifier(
    transparent,
    transparent,
    $cf-grey-65,
    $cf-grey-65,
    true
  );
}

.cf-button-warning,
.cf-button-danger {
  @include buttonColorModifier($c-ruby, $c-topaz, $cf-white, $cf-white);
}

.cf-button-colorless {
  background: transparent;
  color: inherit;
  padding: 0;
  height: auto;
  font-weight: $cf-font-weight--regular;

  &.cf-button-xs {
    font-size: $cf-text-base-0;
  }

  &.cf-button-square {
    color: $cf-grey-45;

    &:focus,
    &:hover {
      color: $cf-white;
    }
  }

  .cf-button--label {
    text-transform: none;
    letter-spacing: 0;
  }

  &:focus .cf-button--label,
  &:hover .cf-button--label {
    text-decoration: underline;
  }

  &:after {
    display: none;
  }
}

/*
  Loading State
  ------------------------------------------------------------------------------
*/
.cf-button--loading,
.cf-button--loading:hover,
.cf-button--loading:active,
.cf-button--loading:active:hover,
.cf-button--loading[disabled],
.cf-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);
  }
}

.cf-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: $cf-border;
}