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


.unl .dcf-btn {
  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: $color-button-primary;
}


.unl a.dcf-btn-secondary:visited {
  color: $color-button-secondary;
}


.unl a.dcf-btn-tertiary:visited {
  color: $color-button-tertiary;
}


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


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


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


.unl .dcf-btn-as-link:visited {
  color: $color-visited;
}


// Hover (and Active)
.unl .dcf-btn-primary:not(:disabled):hover,
.unl .dcf-btn-primary:not(:disabled):active {
  background-color: $bg-color-button-primary-hover;
  border-color: $border-color-button-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: $bg-color-button-secondary-tertiary-hover;
  color: $color-button-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;
}


.unl .dcf-btn-as-link:not(:disabled):hover,
.unl .dcf-btn-as-link:not(:disabled):active {
  color: $color-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 $bg-color-body, 0 0 0 5px $border-color-input-focus;
}


.unl .dcf-btn-inverse-primary:focus {
  box-shadow: 0 0 0 3px $border-color-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 $border-color-input-focus, 0 0 0 5px currentColor;
}


// Active
.unl .dcf-btn-primary:active {
  box-shadow: 0 0 0 3px $bg-color-body, 0 0 0 5px $border-color-button-primary-hover;
}


.unl .dcf-btn-secondary:active,
.unl .dcf-btn-tertiary:active {
  box-shadow: 0 0 0 3px $bg-color-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;
}


@media screen and (prefers-color-scheme: dark) {

  // Visited
  .unl a.dcf-btn-primary\@dark:visited {
    color: $color-button-primary-light-mode;
  }


  .unl a.dcf-btn-secondary\@dark:visited {
    color: $color-button-secondary-light-mode;
  }


  .unl a.dcf-btn-tertiary\@dark:visited {
    color: $color-button-tertiary-light-mode;
  }


  // Hover (and Active)
  .unl .dcf-btn-primary\@dark:not(:disabled):hover,
  .unl .dcf-btn-primary\@dark:not(:disabled):active {
    background-color: $bg-color-button-primary-hover-light-mode;
    border-color: $border-color-button-primary-hover-light-mode;
  }


  .unl .dcf-btn-secondary\@dark:not(:disabled):hover,
  .unl .dcf-btn-secondary\@dark:not(:disabled):active,
  .unl .dcf-btn-tertiary\@dark:not(:disabled):hover,
  .unl .dcf-btn-tertiary\@dark:not(:disabled):active {
    background-color: $bg-color-button-secondary-tertiary-hover-light-mode;
    color: $color-button-secondary-tertiary-hover-light-mode;
  }


  // Focus
  .unl .dcf-btn-primary\@dark:focus,
  .unl .dcf-btn-secondary\@dark:focus,
  .unl .dcf-btn-tertiary\@dark:focus {
    box-shadow: 0 0 0 3px $bg-color-body-light-mode, 0 0 0 5px $color-focus-outline-light-mode;
  }


  // Active
  .unl .dcf-btn-primary\@dark:active {
    box-shadow: 0 0 0 3px $bg-color-body-light-mode, 0 0 0 5px $border-color-button-primary-hover-light-mode;
  }


  .unl .dcf-btn-secondary\@dark:active,
  .unl .dcf-btn-tertiary\@dark:active {
    box-shadow: 0 0 0 3px $bg-color-body-light-mode, 0 0 0 5px currentColor;
  }

}