/**
 * BUTTONS
 */

 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: $border-radius-md;
  padding: calc($spacer / 2) calc($spacer / 1.33);
  font-size: $font-size-base;
  transition: background-color .25s ease, color .25s ease;
}

.btn:hover {
  transition: background-color .25s ease, color .25s ease;
}

.btn:active {
  border: 1px solid transparent;
  outline: 4px solid $blue-200!important;
}

/**
 * SIZES
 */

 .btn-sm {
  //padding: calc($spacer / 4) calc($spacer / 2.66);
  padding: calc($spacer / 2.67) calc($spacer / 1.33);
  font-size: $font-size-sm;
 }

 .btn-lg {
  padding: calc($spacer / 2) $spacer;
  font-size: $h6-font-size;
 }

 .btn-xl {
  padding: calc($spacer * 0.625) calc($spacer * 1.25);
  font-size: $h6-font-size;
 }

 .btn-2xl {
  padding: calc($spacer * .875) calc($spacer * 1.5);
  font-size: $h5-font-size;
 }

/**
 * PRIMARY
 */

.btn-primary {
  background-color: $primary;
  color: #fff;
}

.btn-primary:active {
  outline-color: $blue-200;
}

.btn-primary:hover {
    transition: background-color .25s ease;
    background-color: $blue-600!important;
    border-color: transparent;
}

/**
 * SECONDARY
 */
.btn-secondary {
  color: $primary;
  background-color: $blue-50;
}

.btn-secondary:hover {
  background-color: $blue-100;
  color: $primary!important;
}

/**
 * PLAIN
 */
.btn-plain {
  color: $primary;
  background-color: transparent;
}

.btn-plain:hover {
  color: $blue-400;
}

/**
 * ICONS
 */
.btn-icon-right {
  margin-left: calc($spacer/1.333);
}

.btn-icon-left {
  margin-right: calc($spacer/1.333);
}

.btn-icon {
  width: 20px;
  height: 20px;
  font-size: 0;
}

.btn-icon svg {
  fill: #fff;
  color: #fff;
}

.btn-secondary svg, 
.btn-plain svg {
  fill: $primary;
  color: $primary;
}