/* *****************************************************************************
*
*  Fake btn-outline
*
* ***************************************************************************** */

.btn-selection-outline {
  @include hover-transition-to(background, $gray-100);
  @include transitions(border-color, background);
  position: relative;
  color: $gray-700;
  border: $input-border-width solid $input-border-color;
  border-radius: $input-border-radius;
  margin-bottom: 0 !important;
  padding: $input-btn-padding-y $input-btn-padding-x;
  font-size: $form-font-size;
  min-width: 50px;
  font-family: $font-family-secondary;
  line-height: $input-line-height;
  text-align: center;
  text-transform: uppercase;
  width: 100%;

  &--selected {
    border-color: $black;
    position: relative;
    color: $black;
    font-weight: 700;
  }
}