@use "../../styles/inputs";
@use "../../styles/utils";
@use "./FormFieldLabel/variables" as labelVars;
@use "./FormFieldDescription/variables" as descVars;
@use "./FormFieldError/variables" as errorVars;

@include utils.layer {
  .Block {
    #{labelVars.$margin_name}: 0 0 0.5rem 0;
    #{descVars.$margin_name}: -0.4rem 0 0.5rem 0;
    #{errorVars.$margin_name}: 0.5rem 0 0 0;

    display: flex;
    flex-direction: column;

    &:has(:is([required], [aria-required="true"])) label {
      &::after {
        content: var(--cmm-FormField-required-mark, "*");
        color: var(--cmm-color-danger-5);
        margin-left: 0.25rem;
      }
    }

    &:has(:where(:disabled)) {
      label {
        color: var(--cmm-color-font-subtle);
      }
    }

    &--fill {
      width: 100%;
    }
  }
}
