/*!
 * state-core.css
 * Generated from: styles/state-core.css
 * Do not edit directly; run node scripts/build.mjs.
 */

/*
 * Interaction mechanics for interactive surfaces.
 * Standalone paint and component geometry belong to the companion preset.
 */

.interactive-surface {
  /* Preset-only fallbacks keep the core neutral while preserving complete-bundle behavior. */
  --_is-lift-base: var(
    --interactive-surface-lift-base,
    var(--_is-preset-lift-base, 0px)
  );
  --_is-lift-hover: var(
    --interactive-surface-lift-hover,
    var(--_is-preset-lift-hover, 0px)
  );
  --_is-hover-lift: calc(
    var(--_is-lift-hover) + var(--_is-preset-hover-lift-offset, 0px)
  );
  --_is-lift-active: var(
    --interactive-surface-lift-active,
    var(--_is-preset-lift-active, 0px)
  );
  --_is-base-shadow: var(
    --interactive-surface-shadow-base,
    var(--interactive-surface-level-shadow, var(--_is-preset-shadow-base, none))
  );
  --_is-shadow-base: var(--_is-base-shadow);
  --_is-shadow-hover: var(
    --interactive-surface-shadow-hover,
    var(--_is-preset-shadow-hover, var(--_is-base-shadow))
  );
  --_is-shadow-active: var(
    --interactive-surface-shadow-active,
    var(--_is-preset-shadow-active, var(--_is-base-shadow))
  );
  --_is-darken-hover: var(
    --interactive-surface-darken-hover,
    var(--surface-darken-hover, 0.96)
  );
  --_is-darken-active: var(
    --interactive-surface-darken-active,
    var(--surface-darken-active, 0.98)
  );
  --_is-state-layer-base-opacity: var(
    --interactive-surface-state-layer-opacity,
    0
  );
  --_is-state-layer-hover-opacity: var(
    --interactive-surface-state-layer-hover-opacity,
    var(
      --interactive-surface-state-layer-opacity-hover,
      calc(1 - var(--_is-darken-hover))
    )
  );
  --_is-state-layer-active-opacity: var(
    --interactive-surface-state-layer-active-opacity,
    var(
      --interactive-surface-state-layer-opacity-active,
      calc(1 - var(--_is-darken-active))
    )
  );
  --_is-state-layer-focus-opacity: var(
    --interactive-surface-state-layer-focus-opacity,
    var(
      --interactive-surface-state-layer-opacity-focus,
      var(--_is-state-layer-hover-opacity)
    )
  );
  --_is-state-layer-color: var(
    --interactive-surface-state-layer-color,
    rgb(0 0 0)
  );
  --_is-motion-default: var(
    --interactive-surface-motion-default,
    var(--motion-default, 140ms)
  );
  --_is-motion-press: var(
    --interactive-surface-motion-press,
    var(--motion-press, 60ms)
  );
  --_is-ease-standard: var(
    --interactive-surface-ease-standard,
    var(--ease-standard, cubic-bezier(0.2, 0, 0.2, 1))
  );
  --_is-ease-press: var(
    --interactive-surface-ease-press,
    var(--ease-press, cubic-bezier(0.4, 0, 0.6, 1))
  );

  /* A private tuple lets complete presets preserve timing across competing shorthands. */
  --_is-transition-duration: var(--_is-motion-default);
  --_is-transition-timing-function: var(--_is-ease-standard);
  --_is-transition-delay: 0s;
  --_is-focus-ring-color: var(
    --interactive-surface-focus-ring-color,
    var(--focus-ring, rgb(11 99 246))
  );
  --_is-focus-ring-width: var(--interactive-surface-focus-ring-width, 2px);
  --_is-focus-ring-offset: var(--interactive-surface-focus-ring-offset, 2px);
  --_is-disabled-opacity: var(--interactive-surface-disabled-opacity, 0.72);
  --_is-tap-highlight: var(
    --interactive-surface-tap-highlight-color,
    rgb(11 99 246 / 0.18)
  );

  position: relative;
  isolation: isolate;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: var(--_is-tap-highlight);
  translate: 0 var(--_is-lift-base);
  box-shadow: var(--_is-shadow-base);
  transition:
    translate var(--_is-transition-duration)
      var(--_is-transition-timing-function) var(--_is-transition-delay),
    box-shadow var(--_is-transition-duration)
      var(--_is-transition-timing-function) var(--_is-transition-delay),
    outline-color var(--_is-transition-duration) linear
      var(--_is-transition-delay);
  will-change: auto;
}

/* The isolated state layer changes interaction emphasis without filtering content. */
.interactive-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--_is-state-layer-color);
  opacity: var(--_is-state-layer-base-opacity);
  pointer-events: none;
  z-index: -1;
  transition: opacity var(--_is-motion-default) var(--_is-ease-standard);
}

.interactive-surface:focus {
  outline: var(--_is-focus-ring-width) solid var(--_is-focus-ring-color);
  outline-offset: var(--_is-focus-ring-offset);
}

@supports selector(:focus-visible) {
  .interactive-surface:focus {
    outline: none;
  }
}

.interactive-surface:not(
    :is(.is-disabled, :disabled, [aria-disabled="true"])
  ):focus-visible {
  translate: 0 var(--_is-lift-hover);
  box-shadow: var(--_is-shadow-hover);
  outline: var(--_is-focus-ring-width) solid var(--_is-focus-ring-color);
  outline-offset: var(--_is-focus-ring-offset);
}

.interactive-surface:not(
    :is(.is-disabled, :disabled, [aria-disabled="true"])
  ):focus-visible::before {
  opacity: var(--_is-state-layer-focus-opacity);
}

/* Native file inputs expose an inner button that needs the same interaction feedback as the host. */
:where(input[type="file"].interactive-surface)::file-selector-button {
  cursor: pointer;
  transition:
    background-color var(--_is-transition-duration)
      var(--_is-transition-timing-function) var(--_is-transition-delay),
    border-color var(--_is-transition-duration)
      var(--_is-transition-timing-function) var(--_is-transition-delay),
    box-shadow var(--_is-transition-duration)
      var(--_is-transition-timing-function) var(--_is-transition-delay),
    color var(--_is-transition-duration) var(--_is-transition-timing-function)
      var(--_is-transition-delay);
}

:where(input[type="file"].interactive-surface):not(
    :is(.is-disabled, :disabled, [aria-disabled="true"])
  ):focus-visible::file-selector-button {
  box-shadow: inset 0 0 0 999px
    rgb(0 0 0 / var(--_is-state-layer-focus-opacity));
}

/* Zero-specificity state branches let later transient and focus selectors retain precedence. */
.interactive-surface:where(
    .is-active,
    [aria-pressed="true"],
    [aria-pressed="mixed"],
    [aria-current]:not([aria-current="false"]),
    [aria-selected="true"],
    [aria-busy="true"],
    .is-loading
  ):not(:is(.is-disabled, :disabled, [aria-disabled="true"])) {
  translate: 0 var(--_is-lift-active);
  box-shadow: var(--_is-shadow-active);
}

.interactive-surface:where(
    .is-active,
    [aria-pressed="true"],
    [aria-pressed="mixed"],
    [aria-current]:not([aria-current="false"]),
    [aria-selected="true"],
    [aria-busy="true"],
    .is-loading
  ):not(:is(.is-disabled, :disabled, [aria-disabled="true"]))::before {
  opacity: var(--_is-state-layer-active-opacity);
}

@media (hover: hover) and (pointer: fine) {
  .interactive-surface {
    will-change: translate, box-shadow;
  }

  .interactive-surface:not(
      :is(.is-disabled, :disabled, [aria-disabled="true"])
    ):hover {
    translate: 0 var(--_is-hover-lift);
    box-shadow: var(--_is-shadow-hover);
  }

  .interactive-surface:not(
      :is(.is-disabled, :disabled, [aria-disabled="true"])
    ):hover::before {
    opacity: var(--_is-state-layer-hover-opacity);
  }

  :where(input[type="file"].interactive-surface):not(
      :is(.is-disabled, :disabled, [aria-disabled="true"])
    ):hover::file-selector-button {
    box-shadow: inset 0 0 0 999px
      rgb(0 0 0 / var(--_is-state-layer-hover-opacity));
  }
}

.interactive-surface:not(
    :is(.is-disabled, :disabled, [aria-disabled="true"])
  ):active {
  --_is-transition-duration: var(--_is-motion-press);
  --_is-transition-timing-function: var(--_is-ease-press);

  translate: 0 var(--_is-lift-base);
  box-shadow: var(--_is-shadow-base);
}

.interactive-surface:not(
    :is(.is-disabled, :disabled, [aria-disabled="true"])
  ):active::before {
  opacity: 0;
  transition-duration: var(--_is-motion-press);
  transition-timing-function: var(--_is-ease-press);
}

:where(input[type="file"].interactive-surface):not(
    :is(.is-disabled, :disabled, [aria-disabled="true"])
  ):active::file-selector-button {
  box-shadow: inset 0 0 0 999px
    rgb(0 0 0 / var(--_is-state-layer-active-opacity));
  transition-duration: var(--_is-motion-press);
  transition-timing-function: var(--_is-ease-press);
}

/*
 * Disabled styling is visual only. Consumers must still suppress programmatic and keyboard
 * activation for custom controls that use aria-disabled or the is-disabled class.
 */
.interactive-surface:is(.is-disabled, :disabled, [aria-disabled="true"]) {
  --_is-transition-duration: 0s;

  cursor: not-allowed;
  pointer-events: none;
  translate: none;
  box-shadow: none;
  opacity: var(--_is-disabled-opacity);
  animation: none;
  transition: none;
}

.interactive-surface:is(
    .is-disabled,
    :disabled,
    [aria-disabled="true"]
  )::before {
  opacity: 0;
  animation: none;
  transition: none;
}

:where(input[type="file"].interactive-surface):is(
    .is-disabled,
    :disabled,
    [aria-disabled="true"]
  )::file-selector-button {
  cursor: not-allowed;
  box-shadow: none;
  transition: none;
}

/* Focus remains visible on custom disabled widgets that stay in the keyboard tab order. */
.interactive-surface:is(.is-disabled, [aria-disabled="true"]):focus-visible {
  outline: var(--_is-focus-ring-width) solid var(--_is-focus-ring-color);
  outline-offset: var(--_is-focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  .interactive-surface,
  .interactive-surface:not(
      :is(.is-disabled, :disabled, [aria-disabled="true"])
    ):hover,
  .interactive-surface:not(
      :is(.is-disabled, :disabled, [aria-disabled="true"])
    ):focus-visible,
  .interactive-surface:not(
      :is(.is-disabled, :disabled, [aria-disabled="true"])
    ):active,
  .interactive-surface:where(
      .is-active,
      [aria-pressed="true"],
      [aria-pressed="mixed"],
      [aria-current]:not([aria-current="false"]),
      [aria-selected="true"],
      [aria-busy="true"],
      .is-loading
    ):not(:is(.is-disabled, :disabled, [aria-disabled="true"])) {
    --_is-transition-duration: 0s;

    translate: none;
    animation: none;
    transition: none;
  }

  .interactive-surface::before {
    animation: none;
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .interactive-surface {
    --_is-focus-ring-width: 3px;
  }

  .interactive-surface:where(
      .is-active,
      [aria-pressed="true"],
      [aria-pressed="mixed"],
      [aria-current]:not([aria-current="false"]),
      [aria-selected="true"],
      [aria-busy="true"],
      .is-loading
    ):not(:is(.is-disabled, :disabled, [aria-disabled="true"])) {
    outline: 2px solid currentcolor;
    outline-offset: 2px;
  }

  .interactive-surface:focus,
  .interactive-surface:not(
      :is(.is-disabled, :disabled, [aria-disabled="true"])
    ):focus-visible,
  .interactive-surface[aria-disabled="true"]:focus-visible {
    outline: var(--_is-focus-ring-width) solid var(--_is-focus-ring-color);
  }
}

@media (forced-colors: active) {
  .interactive-surface {
    --_is-lift-base: 0px;
    --_is-lift-hover: 0px;

    /* Integration offsets must not bypass the forced-colors motion reset. */
    --_is-hover-lift: 0px;
    --_is-lift-active: 0px;
    --_is-shadow-base: none;
    --_is-shadow-hover: none;
    --_is-shadow-active: none;

    box-shadow: none;
  }

  .interactive-surface::before {
    display: none;
  }

  .interactive-surface:where(
      .is-active,
      [aria-pressed="true"],
      [aria-pressed="mixed"],
      [aria-current]:not([aria-current="false"]),
      [aria-selected="true"],
      [aria-busy="true"],
      .is-loading
    ):not(:is(.is-disabled, :disabled, [aria-disabled="true"])) {
    outline: 2px solid ButtonText;
    outline-offset: 2px;
  }

  .interactive-surface:focus,
  .interactive-surface:not(
      :is(.is-disabled, :disabled, [aria-disabled="true"])
    ):focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }

  .interactive-surface:is(.is-disabled, :disabled, [aria-disabled="true"]) {
    outline: 1px solid GrayText;
    outline-offset: 2px;
    opacity: 1;
  }

  .interactive-surface[aria-disabled="true"]:focus-visible {
    outline: 2px solid GrayText;
    outline-offset: 2px;
  }
}