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


.unl .dcf-btn {
  @include font-sans;
  @include txt-xs;
  @include ls-2;
}


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


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


.unl .dcf-btn-primary:focus,
.unl .dcf-btn-primary:hover {
  box-shadow: 0 1px $length-em-2 fade-out($color-hover-light-mode,.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-hover-light-mode,.6);
}


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


.unl .dcf-btn-primary:visited {
  color: $color-button-primary-light-mode;
}


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


.unl .dcf-btn-inverse-primary:visited {
  color: $color-button-inverse-primary-light-mode;
}


.unl .dcf-btn-inverse-secondary:visited {
  color: $color-button-inverse-secondary-light-mode;
}


.unl .dcf-btn-inverse-tertiary:visited {
  color: $color-button-inverse-tertiary-light-mode;
}


.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($border-color-input-hover-light-mode,.2);
}


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