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


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


// CSS-TRICKS HIGH CONTRAST MODE
// .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: var(--btn-primary);
}


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


.unl .dcf-btn-inverse-primary:not(:disabled):visited {
  color: var(--btn-inverse-primary);
}


.unl .dcf-btn-inverse-secondary:not(:disabled):visited {
  color: var(--btn-inverse-secondary);
}


.unl .dcf-btn-inverse-tertiary:not(:disabled):visited {
  color: var(--btn-inverse-tertiary);
}


.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