@import "../label/label.css";

@layer lotek {
  .lt-fieldset {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--lt-fieldset-gap, var(--lt-spacing-2));
    margin: 0;
    padding: 0;
    /* The browser's own border and indentation on <fieldset> belong to a look
       from 1996, and cannot be turned off unless both are reset here. */
    border: 0;
    min-inline-size: 0;
  }

  .lt-legend {
    padding: 0;
    margin-block-end: var(--lt-spacing-1);
    font-family: inherit;
    font-size: var(--lt-font-size-m);
    font-weight: var(--lt-font-weight-semibold);
    line-height: var(--lt-line-height-default);
    color: var(--lt-color-neutral-text-strong);
  }

  /* The same marker as on a label. The rules are here and not in label.css,
     because <legend> is a different element with its own defaults. */
  .lt-legend[data-required]::after {
    content: var(--lt-label-required-symbol, " *");
    color: var(--lt-color-danger-text);
    font-weight: var(--lt-font-weight-bold);
  }

  .lt-legend[data-required="text"]::after {
    /* Keep the fallback ASCII. A stylesheet without `@charset` inherits the
       page's encoding, and a non-ASCII fallback came out garbled when the
       page lacked `<meta charset>` and the server sent no charset. Write any
       other character as an escape, such as `\e5`. */
    content: var(--lt-label-required-text, " (required)");
    color: var(--lt-color-danger-text);
    font-weight: var(--lt-font-weight-regular);
    font-size: var(--lt-font-size-xs);
  }

  /* Not when the field is also marked required: the builder function picks
     required, and hand-written markup with both must give the same result.
     The colour is not `disabled-text`: the text is not disabled, and that
     colour gave 4.37:1. */
  .lt-legend[data-optional]:not([data-required])::after {
    content: var(--lt-label-optional-text, " (optional)");
    color: var(--lt-color-neutral-text-subtle);
    font-weight: var(--lt-font-weight-regular);
    font-size: var(--lt-font-size-xs);
  }

  .lt-fieldset[data-state="invalid"] .lt-legend {
    color: var(--lt-color-danger-text);
  }

  /* The fieldset has the same states as the controls it contains, and
     `lt.fieldset.states` has always listed both. Without this rule the
     builder function wrote out an attribute that did nothing. */
  .lt-fieldset[data-state="success"] .lt-legend {
    color: var(--lt-color-success-text);
  }

  .lt-fieldset:disabled .lt-legend,
  .lt-legend[aria-disabled="true"] {
    color: var(--lt-color-neutral-text-subtle);
  }
}