////////////////////////////
// CORE / COMPONENTS / FORMS
////////////////////////////


// Fieldset
.dcf-form fieldset {
  border: $border-width-input $border-style-input $border-color-fieldset;
  @if ($border-radius-fieldset-roundrect) {
    border-radius: $roundrect;
  }
  padding: $padding-top-fieldset $padding-right-fieldset $padding-bottom-fieldset $padding-left-fieldset;
}


.dcf-form fieldset:not(:last-child) {
  margin-bottom: $margin-bottom-fieldset;
}


// Legend
.dcf-legend, // TODO: deprecate .dcf-legend?
.dcf-form legend {
  @if (to-number($font-size-legend) != to-number(#{ms(0)}em)) {
    font-size: $font-size-legend;
  }
  @if ($font-weight-legend-bold) {
    font-weight: bold;
  }
  margin-left: -#{$padding-legend}; // Left align legend with form elements
  padding-left: $padding-legend;
  padding-right: $padding-legend;
}


// Label
@if (to-number($font-size-label) != to-number(#{ms(0)}em)) {
  .dcf-label, // TODO: deprecate .dcf-label?
  .dcf-form label {
    font-size: $font-size-label;
  }
}


// Form group
.dcf-form-group {
  margin-bottom: $margin-bottom-form-group;
}


.dcf-form-group:disabled label {
  cursor: not-allowed !important;
  opacity: $opacity-disabled;
}


// Required
.dcf-required {
  color: $color-required-label;
  font-size: $font-size-required;
  @if ($font-style-required-italic) {
    font-style: italic;
  }
  margin-left: $margin-left-required;
  padding: $padding-top-required $padding-right-required $padding-bottom-required $padding-left-required;
}


// Form help
.dcf-form-help {
  color: $color-form-help;
  display: inline-block;
  font-size: $font-size-form-help;
  line-height: $line-height-form-help;
  margin-top: $margin-top-form-help;
}


// Inputs
.dcf-input-text, // TODO: deprecate .dcf-input-text?
.dcf-form input:not([type="file"]):not([type="submit"]),
.dcf-form textarea {
  background-color: $bg-color-input;
  border: $border-width-input $border-style-input $border-color-input;
  @if ($border-radius-input-roundrect) {
    border-radius: $roundrect;
  } @else {
    border-radius: 0;
  }
}


.dcf-input-text, // TODO: deprecate .dcf-input-text?
.dcf-form input:not([type="checkbox"]):not([type="file"]):not([type="radio"]):not([type="range"]):not([type="submit"]),
.dcf-form textarea {
  padding: $padding-top-input $padding-right-input $padding-bottom-input $padding-left-input;
}


.dcf-input-text:focus, // TODO: deprecate .dcf-input-text?
.dcf-form input:not([type="submit"]):focus,
.dcf-form textarea:focus {
  border-color: $border-color-input-focus;
  outline: none;
}


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


.dcf-input-text, // TODO: deprecate .dcf-input-text?
.dcf-input-file, // TODO: deprecate .dcf-input-file?
.dcf-form textarea,
.dcf-form input:not([type="button"]):not([type="color"]):not([type="range"]):not([type="reset"]):not([type="submit"]) {
  appearance: none;
  color: inherit;
  font-family: inherit;
}


.dcf-input-text, // TODO: deprecate .dcf-input-text?
.dcf-input-file, // TODO: deprecate .dcf-input-file?
.dcf-form textarea,
.dcf-form input:not([type="button"]):not([type="color"]):not([type="reset"]):not([type="submit"]) {
  display: block;
}


// Display form controls inline instead of stacked at the small breakpoint
@include mq(sm) {

  .dcf-input-group-form, // TODO: deprecate .dcf-input-group-form?
  .dcf-form-controls-inline {
    align-items: baseline; // Align to baseline in case there is a difference in size between the label and its corresponding input
    display: flex;
    flex-wrap: wrap; // Allow input to wrap at narrower viewport widths
  }


  .dcf-form-controls-inline label {
    flex-shrink: 0; // Force input to wrap when label text is long
    margin-right: $margin-right-form-controls-inline-label;
  }


  .dcf-form-controls-inline input,
  .dcf-form-controls-inline select,
  .dcf-form-controls-inline label + span {
    flex: 1 1 1px; // Let input or select grow, shrink and wrap as needed
  }


  .dcf-form-controls-inline .dcf-form-help {
    flex-basis: 100%; // Place help text on its own line
  }

}