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


.unl .dcf-btn {
  @include txt-sm;
  text-decoration: none;
  transition: background-color $transition-duration-hover-off $transition-timing-fn-hover-off, border-color $transition-duration-hover-off $transition-timing-fn-hover-off, box-shadow $transition-duration-hover-off $transition-timing-fn-hover-off, color $transition-duration-hover-off $transition-timing-fn-hover-off;
}


.unl .dcf-btn:hover {
  transition: background-color $transition-duration-hover-on $transition-timing-fn-hover-on, border-color $transition-duration-hover-on $transition-timing-fn-hover-on, color $transition-duration-hover-on $transition-timing-fn-hover-on;
}


.unl .dcf-btn:focus {
  outline: 3px solid transparent; // https://sarahmhigley.com/writing/whcm-quick-tips/
  transition: box-shadow $transition-duration-hover-on $transition-timing-fn-hover-on;
}


// Visited

.unl a.dcf-btn-primary:visited {
  color: var(--btn-primary);
}


.unl a.dcf-btn-secondary:visited {
  color: var(--btn-secondary);
}


.unl a.dcf-btn-tertiary:visited {
  color: var(--btn-tertiary);
}


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


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


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


// Hover (and Active)

.unl .dcf-btn-primary:not(:disabled):hover,
.unl .dcf-btn-primary:not(:disabled):active {
  background-color: var(--bg-btn-primary-hover);
  border-color: var(--b-btn-primary-hover);
}

.unl .dcf-btn-secondary:not(:disabled):hover,
.unl .dcf-btn-secondary:not(:disabled):active,
.unl .dcf-btn-tertiary:not(:disabled):hover,
.unl .dcf-btn-tertiary:not(:disabled):active {
  background-color: var(--bg-btn-secondary-tertiary-hover);
  color: var(--btn-secondary-tertiary-hover);
}


.unl .dcf-btn-inverse-primary:not(:disabled):hover,
.unl .dcf-btn-inverse-primary:not(:disabled):active {
  background-color: $bg-color-button-inverse-primary-hover;
  border-color: $border-color-button-inverse-primary-hover;
}


.unl .dcf-btn-inverse-secondary:not(:disabled):hover,
.unl .dcf-btn-inverse-secondary:not(:disabled):active,
.unl .dcf-btn-inverse-tertiary:not(:disabled):hover,
.unl .dcf-btn-inverse-tertiary:not(:disabled):active {
  background-color: $bg-color-button-inverse-secondary-tertiary-hover;
  color: $color-button-inverse-secondary-tertiary-hover;
}


// Focus
.unl .dcf-btn:focus {
  transition: box-shadow $transition-duration-hover-on $transition-timing-fn-hover-on;
}


.unl .dcf-btn-primary:focus,
.unl .dcf-btn-secondary:focus,
.unl .dcf-btn-tertiary:focus {
  box-shadow: 0 0 0 3px var(--bg-body), 0 0 0 5px var(--b-input-focus);
}


.unl .dcf-btn-inverse-primary:focus {
  box-shadow: 0 0 0 3px var(--b-input-focus), 0 0 0 5px $bg-color-button-inverse-primary;
}


.unl .dcf-btn-inverse-secondary:focus,
.unl .dcf-btn-inverse-tertiary:focus {
  box-shadow: 0 0 0 3px var(--b-input-focus), 0 0 0 5px currentColor;
}


// Active
.unl .dcf-btn-primary:active {
  box-shadow: 0 0 0 3px var(--bg-body), 0 0 0 5px var(--b-btn-primary-hover);
}


.unl .dcf-btn-secondary:active,
.unl .dcf-btn-tertiary:active {
  box-shadow: 0 0 0 3px var(--bg-body), 0 0 0 5px currentColor;
}


.unl .dcf-btn-inverse-primary:active {
  box-shadow: 0 0 0 3px $color-hover-light-mode, 0 0 0 5px $bg-color-button-inverse-primary;
}


.unl .dcf-btn-inverse-secondary:active,
.unl .dcf-btn-inverse-tertiary:active {
  box-shadow: 0 0 0 3px $color-hover-light-mode, 0 0 0 5px currentColor;
}