initiatived21/d21

/*------------------------------------*\
    #BTN
\*------------------------------------*/

/**
 * Button component
 *
 * To be used with 'o-btn'
 */

.c-btn {
  border: none;

  color: $white;
  transition: background-color $transition-time;

  max-width: 100%;
  height: $input-height;

  @include font-size(16px, 1);

  a {
    color: $white;
  }

  user-select: none;

  .fa {
    margin-right: 0.15em;
  }
}

.c-btn--primary {
  background-color: $primary-color;

  &:hover, &:active {
    background-color: $primary-color-highlight;
  }
}

.c-btn--secondary {
  background-color: $secondary-color;

  &:hover, &:active {
    background-color: $secondary-color-highlight;
  }
}

.c-btn--tertiary {
  background-color: $tertiary-color;

  &:hover, &:active {
    background-color: $tertiary-color-highlight;
  }
}

.c-btn--disabled {
  background-color: $c-btn--disabled-background;
  border-color: $c-btn--disabled-background;
  cursor: progress; /* or 'auto' */
}

.c-btn--tiny {
  height: initial;
  @include font-size(14px, 1);
  padding: 10px 12px 11px;
}