/*
Label

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

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

@layer components {

.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);
}

.label:has(:disabled),
.label[data-disabled],
.label:has(+ :disabled),
.label:has(+ :not(label, .label) :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(:disabled), .label[data-disabled]) :disabled {
  opacity: 1;
}

}