//
// Base styles
//

.btn {
  letter-spacing: 0.86px;
  text-transform: uppercase;
  white-space: nowrap;
  appearance: none;

  // Disabled comes first so active can properly restyle
  &:not(.btn-link).disabled,
  &:not(.btn-link):disabled {
    background-color: $gray-300;
    border-color: transparent;
    color: rgba($white, 0.6);
  }

  svg {
    width: 24px;
    height: 24px;
    vertical-align: top;

    &:not(:last-child) {
      margin-right: 8px;
    }

    &:not(:first-child) {
      margin-left: 8px;
    }

    &:first-child:last-child {
      display: block;
    }
  }

  &.padless {
    padding: 0;
    border: 0;
  }

  .timer {
    color: $white;
  }
}

//
// Button variants
//

.btn-light {
  color: $body-color;
}

//
// Link buttons
//

// Make a button look and behave like a link
.btn-link {
  font-weight: $font-weight-medium;

  &:hover,
  &:focus {
    text-decoration: none;
    box-shadow: none;
  }

  &:disabled {
    color: $gray-400 !important;
    background-color: transparent !important;
  }
}

//
// Alternate buttons
//

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    background-color: $input-bg;
    border-color: $input-border-color;

    &:not(:disabled):not(.disabled):hover,
    &:not(:disabled):not(.disabled):active {
      color: map-get($theme-colors, $color);
      background-color: $input-bg;
      border-color: $input-border-color;
    }

    .show > &.dropdown-toggle {
      color: $input-color;
      background-color: $input-bg;
      border-color: $input-border-color;
    }
  }
}
