////////////////////////////////
// !THEME / COMPONENTS / BUTTONS
////////////////////////////////


.unl .dcf-btn {
  border-radius: 0;
  border-style: solid;
  border-width: 2px;
  @include font-sans;
  @include txt-xs;
  font-weight: bold;
  @include ls-2;
  padding: $length-em-3 $length-em-5;
  text-transform: uppercase;
}


.unl .dcf-btn:focus {
  outline: none;
}


// !Button Hierarchy
.unl .dcf-btn-secondary,
.unl .dcf-btn-tertiary,
.unl .dcf-btn-inverse-secondary,
.unl .dcf-btn-inverse-tertiary {
  background-color: transparent;
}


.unl .dcf-btn-secondary,
.unl .dcf-btn-inverse-secondary {
  border-color: currentColor;
}


.unl .dcf-btn-tertiary,
.unl .dcf-btn-inverse-tertiary {
  border-color: transparent;
  text-decoration: underline;
}


.unl .dcf-btn-secondary:active,
.unl .dcf-btn-tertiary:active {
  color: $color-button-active;
}


.unl .dcf-btn-primary:focus,
.unl .dcf-btn-primary:hover {
  box-shadow: 0 1px $length-em-2 fade-out($color-button-hover,.4);
}


.unl .dcf-btn-secondary:focus,
.unl .dcf-btn-secondary:hover,
.unl .dcf-btn-tertiary:focus,
.unl .dcf-btn-tertiary:hover {
  box-shadow: 0 1px $length-em-1 fade-out($color-button-hover,.6);
}


.unl .dcf-btn-primary {
  background-color: $color-button;
  border-color: $color-button;
  color: $white;
}


.unl .dcf-btn-primary:active {
  background-color: $color-button-active;
  border-color: $color-button-active;
}


.unl .dcf-btn-secondary,
.unl .dcf-btn-tertiary {
  color: $color-button;
}


.unl .dcf-btn-secondary:active {
  border-color: currentColor;
}


.unl .dcf-btn-inverse-primary:focus,
.unl .dcf-btn-inverse-primary:hover,
.unl .dcf-btn-inverse-secondary:focus,
.unl .dcf-btn-inverse-secondary:hover,
.unl .dcf-btn-inverse-tertiary:focus,
.unl .dcf-btn-inverse-tertiary:hover {
  box-shadow: 0 1px $length-em-2 fade-out($color-border-input-hover,.2);
}


.unl a.dcf-btn-inverse-primary,
.unl a.dcf-btn-inverse-secondary {
  text-decoration: none;
}


.unl .dcf-btn-inverse-primary {
  background-color: $color-inverse;
  border-color: $color-inverse;
}


.unl .dcf-btn-inverse-secondary,
.unl .dcf-btn-inverse-tertiary {
  color: $color-inverse;
}

// TODO: add :active state styles to inverse buttons