//////////////////////////////
// THEME / COMPONENTS / GLOBAL
//////////////////////////////


.unl .dcf-datepicker-dialog[aria-hidden="true"] {
  transition: opacity $transition-duration-fade-out $transition-timing-fn-fade-out;
}


.unl .dcf-datepicker-dialog[aria-hidden="false"] {
  transition: opacity $transition-duration-fade-in $transition-timing-fn-fade-in;
}


.unl .dcf-datepicker-dialog-header {
  border-bottom: 1px solid var(--b);
}


.unl .dcf-datepicker-dialog-calendar td[aria-selected] {
  background-color: var(--bg-inverse);
  color: var(--inverse);
}


.unl .dcf-datepicker-dialog-calendar td:not(.disabled):not([tabindex="0"]):not([aria-selected]) {
  transition: background-color $transition-duration-hover-off $transition-timing-fn-hover-off, border-color $transition-duration-hover-off $transition-timing-fn-hover-off, color $transition-duration-hover-off $transition-timing-fn-hover-off;
}


.unl .dcf-datepicker-dialog-calendar td:not(.disabled):not([tabindex="0"]):not([aria-selected]):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-datepicker-dialog-calendar td[tabindex="0"]:not(.disabled),
.unl .dcf-datepicker-dialog-calendar td:not(.disabled):focus {
  outline: 3px solid transparent; // https://sarahmhigley.com/writing/whcm-quick-tips/
  transition: box-shadow $transition-duration-hover-on $transition-timing-fn-hover-on;
}


.unl .dcf-datepicker-dialog-calendar td[tabindex="0"]:not(.disabled),
.unl .dcf-datepicker-dialog-calendar td:not(.disabled):focus,
.unl .dcf-datepicker-dialog-calendar td:not(.disabled):active {
  box-shadow: 0 0 0 3px var(--bg-dialog), 0 0 0 5px currentColor;
}


.unl .dcf-datepicker-dialog-calendar td[aria-selected][tabindex="0"] {
  box-shadow: 0 0 0 3px var(--bg-dialog), 0 0 0 5px var(--bg-inverse); // Match aria-selected selected background-color
}


.unl .dcf-datepicker-dialog-footer {
  border-top: 1px solid var(--b);
}