/* 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.reset {

  :where(.sds-icon-button),
  :where(.sds-icon-button)::before {
    box-sizing: border-box;
  }

  :where(.sds-icon-button) {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
}

@layer sds.components {

  .sds-icon-button {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition:
      background-color var(--sds-motion-fast) var(--sds-ease-standard),
      border-color var(--sds-motion-fast) var(--sds-ease-standard),
      color var(--sds-motion-fast) var(--sds-ease-standard),
      box-shadow var(--sds-motion-fast) var(--sds-ease-standard),
      transform var(--sds-motion-fast) var(--sds-ease-standard);
  }

  .sds-icon-button {
    border: var(--sds-border-thin) solid transparent;
  }

  .sds-icon-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, var(--sds-touch-target));
    height: max(100%, var(--sds-touch-target));
    transform: translate(-50%, -50%);
  }

  .sds-icon-button:focus-visible {
    outline: var(--sds-focus-ring-width) solid var(--sds-color-focus);
    outline-offset: var(--sds-focus-ring-offset);
  }

  :is(.sds-icon-button):where(:not([data-variant]), [data-variant="primary"]) {
    background-color: var(--sds-color-accent);
    color: var(--sds-color-on-accent);
  }

  :is(.sds-icon-button):where([data-variant="secondary"]) {
    background-color: var(--sds-color-surface-raised);
    border-color: var(--sds-color-line-strong);
    color: var(--sds-color-text);
  }

  :is(.sds-icon-button):where([data-variant="ghost"]) {
    background-color: transparent;
    color: var(--sds-color-text);
  }

  @media (hover: hover) {

    :is(.sds-icon-button):where(:not([data-variant]), [data-variant="primary"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: var(--sds-color-accent-strong);
      box-shadow: var(--sds-glow-sm);
    }

    :is(.sds-icon-button):where([data-variant="secondary"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-accent) calc(var(--sds-mix-hover) * 100%), var(--sds-color-surface-raised));
      border-color: var(--sds-color-accent-text);
    }

    :is(.sds-icon-button):where([data-variant="ghost"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-accent) calc(var(--sds-mix-hover) * 100%), transparent);
    }
  }

  :is(.sds-icon-button):where(:active:not(:disabled, [aria-disabled="true"])) {
    box-shadow: none;
    transform: scale(var(--sds-press-scale));
  }

  :is(.sds-icon-button):where([aria-pressed="true"]) {
    box-shadow: inset 0 0 0 var(--sds-border-thick) var(--sds-color-accent-text);
  }

  :is(.sds-icon-button):where([data-variant="ghost"], [data-variant="secondary"]):where([aria-pressed="true"]) {
    background-color: color-mix(in srgb, var(--sds-color-accent) calc(var(--sds-mix-strong) * 100%), transparent);
    color: var(--sds-color-text);
  }

  :is(.sds-icon-button):where(:disabled, [aria-disabled="true"]) {
    background-color: var(--sds-color-disabled);
    border-color: transparent;
    color: var(--sds-color-on-disabled);
    box-shadow: none;
    cursor: not-allowed;
  }

  :is(.sds-icon-button):where([data-variant="ghost"]):where(:disabled, [aria-disabled="true"]) {
    background-color: transparent;
  }

  /* --- icon-button ------------------------------------------------------ */

  .sds-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: var(--sds-icon-button-radius);
    vertical-align: middle;
  }

  .sds-icon-button:where(:not([data-size]), [data-size="md"]) {
    width: var(--sds-icon-button-md-size);
    height: var(--sds-icon-button-md-size);
  }

  /* icon-button@1.9: xs is the compact size; the hit area stays the touch target. */
  .sds-icon-button:where([data-size="xs"]) {
    width: var(--sds-icon-button-xs-size);
    height: var(--sds-icon-button-xs-size);
  }

  .sds-icon-button:where([data-size="sm"]) {
    width: var(--sds-icon-button-sm-size);
    height: var(--sds-icon-button-sm-size);
  }

  .sds-icon-button:where([data-size="lg"]) {
    width: var(--sds-icon-button-lg-size);
    height: var(--sds-icon-button-lg-size);
  }

  .sds-icon-button .sds-icon {
    width: 50%;
    height: 50%;
  }

  /* icon-button@1.2: captioned, a visible word under the icon; the hit area holds both. */
  .sds-icon-button:where([data-variant="captioned"]) {
    flex-direction: column;
    gap: var(--sds-space-1);
    width: auto;
    min-width: var(--sds-touch-target);
    height: auto;
    min-height: var(--sds-touch-target);
    padding: var(--sds-space-2) var(--sds-space-3);
    border-radius: var(--sds-radius-md);
    background-color: transparent;
    color: var(--sds-color-text);
  }

  .sds-icon-button:where([data-variant="captioned"]) .sds-icon {
    width: calc(var(--sds-icon-button-md-size) * 0.5);
    height: calc(var(--sds-icon-button-md-size) * 0.5);
  }

  .sds-icon-button-caption {
    font-family: var(--sds-font-body);
    font-size: calc(var(--sds-type-caption-size) * var(--sds-type-scale));
    font-weight: var(--sds-type-label-weight);
    line-height: var(--sds-type-caption-line-height);
  }

  @media (hover: hover) {
    .sds-icon-button:where([data-variant="captioned"]):where(:hover:not(:disabled, [aria-disabled="true"])) {
      background-color: color-mix(in srgb, var(--sds-color-text) calc(var(--sds-mix-subtle) * 100%), transparent);
    }
  }

  .sds-icon-button:where([data-variant="captioned"]):where(:disabled, [aria-disabled="true"]) {
    color: var(--sds-color-on-disabled);
  }
}