/////////////////////////////
// THEME / COMPONENTS / FORMS
/////////////////////////////


// Labels
.unl .dcf-form label {
  margin-bottom: $margin-bottom-form-label;
}


// Required
.unl .dcf-required {
  background-color: var(--bg-required);
  border: 1px solid var(--b-required);
  border-radius: $pill;
  display: inline-block;
  @include lh-1;
  margin-left: $margin-left-required;
  padding: $padding-top-required $padding-right-required $padding-bottom-required $padding-left-required;
  text-align: center;
  vertical-align: top;
  white-space: nowrap;
}


// Inputs
.unl .dcf-input-text, // TODO: deprecate?
.unl .dcf-form input:not([type="submit"]),
.unl .dcf-form textarea {
  transition: border-color $transition-duration-hover-off $transition-timing-fn-hover-off, box-shadow $transition-duration-hover-off $transition-timing-fn-hover-off;
}


.unl .dcf-input-text:disabled, // TODO: deprecate?
.unl .dcf-form input:not([type="submit"]):disabled,
.unl .dcf-form textarea:disabled {
  background-color: var(--bg-input-disabled);
}


.unl .dcf-input-text:hover, // TODO: deprecate?
.unl .dcf-form input:not([type="submit"]):hover,
.unl .dcf-form textarea:hover {
  transition: border-color $transition-duration-hover-on $transition-timing-fn-hover-on;
}


.unl .dcf-input-text:focus, // TODO: deprecate?
.unl .dcf-form input:not([type="submit"]):focus,
.unl .dcf-form textarea:focus {
  box-shadow: 0 0 0 3px var(--bg-body), 0 0 0 5px var(--b-input-focus);
  transition: box-shadow $transition-duration-hover-on $transition-timing-fn-hover-on;
}


// Input: Control
.unl .dcf-input-control { // TODO: deprecate?
  @include mr-1;
}


// Input: File
.unl .dcf-form input[type="file"] {
  @include rounded;
}

.unl .dcf-form input[type="file"]::-webkit-file-upload-button {
  @include txt-sm;
  @include bold;
  padding: $padding-top-button $padding-right-button $padding-bottom-button $padding-left-button;
  @include mr-4;
}


// Form Controls Inline Label
.unl .dcf-form-controls-inline label {
  margin-bottom: 0;
}