/* Generated by tools/build.py from web/src/sds.css (one part of core.css). Do not edit. */

@layer sds.reset, sds.components;

@layer sds.components {

  :where(.sds-screen) :where(h1, h2, h3),
  :where([data-sds-screen]) :where(h1, h2, h3) {
    font-family: var(--sds-font-display);
  }

  :where(.sds-dialog) :where(h1, h2, h3) {
    font-family: var(--sds-font-display);
  }

  .sds-tab-mark:where(.sds-badge) {
    width: auto;
    height: var(--sds-badge-sm-size);
    border-radius: var(--sds-radius-pill);
    clip-path: none;
  }

  /* --- disabled: the form controls' disabled fill, text color and not-allowed cursor. After the
     controls, so it wins over their checked, hover and variant looks. */

  .sds-checkbox:where(:disabled),
  .sds-select:where(:disabled),
  .sds-text-input:where(:disabled),
  .sds-choice-tile:where(:disabled, [aria-disabled="true"]:not([data-state="locked"]), :has(> input:disabled)),
  .sds-chip:where([data-variant="filter"]):where(:disabled, [aria-disabled="true"], :has(> input:disabled)) {
    border-color: transparent;
    background-color: var(--sds-color-disabled);
    color: var(--sds-color-on-disabled);
    cursor: not-allowed;
  }

  .sds-rebind-row:where([data-state="conflict"]) .sds-field-row-description {
    color: var(--sds-color-text);
  }

  /* --- core patterns: drag-and-drop and input-mode looks, after every component so they
     apply over them in sds.css. --------------------------------------------------- */

  /* --- v1.2 patterns (core part) -------------------------------------------------------
     drag-and-drop: .sds-drag-ghost follows the pointer (--_x, --_y set in the CSSOM), lifted by
     drag-and-drop.lift; .sds-drop-target[data-sds-drop="accept|reject"] shows a check or a
     cross as well as color. input-mode: data-sds-input on <html>; the cursor hides while a
     gamepad drives. */

  .sds-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--sds-layer-tooltip);
    margin: 0;
    box-shadow: var(--sds-shadow-lg);
    pointer-events: none;
    opacity: var(--sds-drag-and-drop-ghost-opacity);
    transform: translate(var(--_x, 0px), calc(var(--_y, 0px) - var(--sds-drag-and-drop-lift)));
  }

  .sds-drop-target:where([data-sds-drop="accept"]) {
    outline: var(--sds-border-thick) dashed var(--sds-drag-and-drop-accept);
    outline-offset: var(--sds-border-thin);
  }

  .sds-drop-target:where([data-sds-drop="reject"]) {
    outline: var(--sds-border-thick) dashed var(--sds-drag-and-drop-reject);
    outline-offset: var(--sds-border-thin);
  }

  .sds-drop-target:where([data-sds-drop])::after {
    position: absolute;
    inset-block-start: calc(var(--sds-space-2) * -1);
    inset-inline-end: calc(var(--sds-space-2) * -1);
    display: grid;
    place-items: center;
    width: 1.4em;
    height: 1.4em;
    border-radius: var(--sds-radius-round);
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-heading-weight);
    line-height: 1;
    pointer-events: none;
  }

  .sds-drop-target:where([data-sds-drop="accept"])::after {
    content: "\2713";
    background-color: var(--sds-color-success);
    color: var(--sds-color-on-success);
  }

  .sds-drop-target:where([data-sds-drop="reject"])::after {
    content: "\2715";
    background-color: var(--sds-color-danger);
    color: var(--sds-color-on-danger);
  }

  @media (prefers-reduced-motion: reduce) {
    .sds-drag-ghost {
      transform: translate(var(--_x, 0px), var(--_y, 0px));
    }
  }
}