/*
Label

A native <label> in the label role's type. Dims when the control it names
is disabled: a wrapped control (:has), the sibling control right before or
after it, or a disabled Field ([data-disabled]).

  .label                  the label
  .label-required         the required marker, aria-hidden
*/

/* The package's layer order, repeated in every sheet so it holds whichever sheet loads first. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer templates {

.label {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--control-gap);
  color:          var(--ink);
  font-family:    var(--font-ui);
  font-size:      var(--text-label);
  font-weight:    var(--weight-ui);
  letter-spacing: var(--tracking-ui);
  line-height:    var(--leading-snug);
  user-select:    none;
  cursor:         default;
  max-width:      100%;
  min-width:      0;
  overflow-wrap:  anywhere;
}

.label[for],
.label:has(input, select, textarea, button) {
  cursor: pointer;
}

.label-required {
  color: var(--danger);
}

/* The control is what dims the label, not any disabled part inside it: a
   NumberInput's step button at its min, a calendar's disabled days or a
   required select's placeholder option leave the label alone. */
.label:has(:is(input:not([type="hidden"]), select, textarea, [role="combobox"]):disabled),
.label[data-disabled],
.label:has(+ :disabled),
.label:has(+ :not(label, .label) :is(input:not([type="hidden"]), select, textarea, [role="combobox"]):disabled),
:disabled + .label,
:not(.label)[data-disabled] + .label {
  cursor:  not-allowed;
  opacity: var(--opacity-disabled);
}

/* Dims once: a label that wraps its disabled control already dims the whole
   row, so the control inside does not dim again (a native checkbox or an
   input dims itself otherwise). */
:is(.label:has(:is(input:not([type="hidden"]), select, textarea, [role="combobox"]):disabled), .label[data-disabled]) :disabled {
  opacity: 1;
}

}