$rag-button-size: 34px;
$rag-button-size-large: 44px;
$rag-button-border-width: 1px !default;
$rag-button-border-color: $gray-lighter !default;
$rag-button-border-radius: $border-radius !default;
$rag-button-padding: $padding-content !default;
$rag-button-active-color: $color-primary !default;
$rag-button-icon-size: 24px !default;

.hitarea {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  &.disabled {
    cursor: default;
    pointer-events: none;
  }
}

/**
 * 1. Ensures inline icons and text is centered vertically.
 */
.rag-button {
  @extend .hitarea;
  @extend %truncate;

  position: relative;
  display: inline-block;
  height: $rag-button-size;
  min-width: $rag-button-size;
  padding: 0 $rag-button-padding;
  line-height: ($rag-button-size - 2 * $rag-button-border-width);
  font-weight: 500;
  text-align: center;
  border: $rag-button-border-width solid $rag-button-border-color;
  border-radius: $rag-button-border-radius;
  vertical-align: middle;

  // span {
  //   @extend %align-middle; /* 1 */
  // }

  &:hover {
    z-index: 1;
    background-color: rgba(0, 0, 0, .02);
  }

  &.active, &:active {
    z-index: 1;
    background-color: $rag-button-active-color;
    border-color: transparent;
    color: $text-color-inverted;
  }

  &.disabled {
    background-color: transparent;
    color: $text-color-muted;
    cursor: default;
    pointer-events: none;
  }

  &.success {
    border-color: $color-success;
  }

  &.warning {
    border-color: $color-warning;
  }

  &.danger {
    border-color: $color-danger;
  }
}

.rag-button-large {
  height: $rag-button-size-large;
  line-height: ($rag-button-size-large - 2 * $rag-button-border-width);
}

.rag-button-basic {
  color: $color-primary;
  border-radius: 0;
  border-color: transparent;
}

.rag-button-accent {
  color: $color-primary;
}

.rag-button-prominent {
  background-color: $color-primary;
  border-color: transparent;
  color: $text-color-inverted;

  &:hover {
    background-color: darken($color-primary, 5%);
  }

  &.success {
    background-color: $color-success;
    border-color: $color-success;

    &:hover {
      background-color: darken($color-success, 5%);
    }
  }

  &.warning {
    background-color: $color-warning;
    border-color: $color-warning;

    &:hover {
      background-color: darken($color-warning, 5%);
    }
  }

  &.danger {
    background-color: $color-danger;
    border-color: $color-danger;

    &:hover {
      background-color: darken($color-danger, 5%);
    }
  }
}

.rag-button-overlay {
  background-color: $white;
  background-clip: padding-box;
  border-color: rgba($black, .2);

  &:hover {
    background-color: darken($white, 2%);
  }

  &.active, &:active {
    background-color: $rag-button-active-color;
    border-color: rgba($black, .2);
    color: $text-color-inverted;
  }
}

.rag-button-block {
  display: block;
  max-width: (320px - 2 * $padding-content);
  margin: auto;
}