@use '@digdir/ds-tokens/build/tokens.scss' as tokens;
@use './typography.scss' as typography;
@use './baseline/utils.scss' as utils;

// Classnames
$field-classname: '#{utils.$prefix}-form-field';
$field-control-classname: '#{$field-classname}__control';
$field-label-classname: '#{$field-classname}__label';
$field-error-message-classname: '#{$field-classname}__error-message';

// Form utility classes for elements that need external label or error message.
.#{$field-classname} {
  display: flex;
  flex-direction: column;

  & > .#{$field-control-classname} {
    order: 2;
  }
  /* The __label element must be placed after the input element in HTML 
  *  to enable CSS styling based on interaction with the input element.
  *  This enables the __label (and __error-message) to be styled through
  *  modifiers applied to the __control element containing the input element.
  *  Thus, to move it before the input field, it is moved with CSS ordering.
  *
  *  example selectors: 
  *   LARGE MODIFICATION:
  *   .#{utils.$prefix}-input-field--large ~ .#{$field-error-message-classname}
  *   .dds-input-field--large ~ .dds-form-field__label
  *   OR
  *   .dds-form-field__control.dds-input-field--large ~ .dds-form-field__label
  *   FOCUS/ACTIVE MODIFICATION:
  *   .dds-form-field__control.dds-input-field:focus ~ .dds-form-field__label
  */
  & > .#{$field-label-classname} {
    display: block;
    order: 1;
    padding-bottom: tokens.$spacing-base-2;
    @include typography.text-body-300();
  }
  & > .#{$field-error-message-classname} {
    display: block;
    order: 3;
    padding-top: tokens.$spacing-base-2;
    @include typography.text-body-300();
    color: tokens.$color-interface-error;
  }
}