@layer reset, base, variants, sizes, states;
@layer reset {
  :host {
    display: inline-flex;
  }
  :host,
  :host *,
  :host ::before,
  :host ::after {
    box-sizing: border-box;
  }
  :host,
  :host *:not(dialog) {
    margin: 0;
  }
  :host {
    padding: 0;
    min-inline-size: 0;
    min-block-size: 0;
  }
  :host > * {
    interpolate-size: allow-keywords;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: var(--dds-font-family);
    font-feature-settings: var(--dds-font-features);
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  :host :focus-visible {
    outline: 2px solid var(--dds-color-border-focus);
  }
}
@layer base {
  :host {
    --_button-background: var(--dds-button-background, transparent);
    --_button-background-hover: var(--dds-button-background-hover, transparent);
    --_button-box-shadow: var(--dds-button-box-shadow, none);
    --_button-border-radius: var(
      --dds-button-border-radius,
      var(--dds-button-border-radius-full)
    );
    --_button-size: var(--dds-button-size, var(--dds-button-size-m));
    --_button-font-size: var(
      --dds-button-font-size,
      var(--dds-button-font-size-m)
    );
    --_button-color: var(--dds-button-color, var(--dds-button-color-default));
    --_button-duration: var(
      --dds-button-duration,
      var(--dds-button-duration-fast)
    );
    --_button-padding-inline: var(--dds-button-padding-inline, 8px);
  }
  :host [data-part=root] {
    display: inline-flex;
    flex-shrink: 0;
    user-select: none;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    position: relative;
    align-items: center;
    justify-content: center;
    block-size: var(--_button-size);
    min-inline-size: var(--_button-size);
    border-radius: var(--_button-border-radius);
    background: var(--_button-background);
    padding-block: 0;
    padding-inline: 4px;
    box-shadow: var(--_button-box-shadow);
    color: var(--_button-color);
    scale: 1;
    will-change: scale;
  }
  @media (prefers-reduced-motion: no-preference) {
    :host [data-part=root] {
      transition: scale var(--_button-duration) ease, background var(--_button-duration) ease;
    }
    :host [data-part=root]:active {
      scale: 0.95;
    }
  }
  :host [data-part=content] {
    display: inline-flex;
    align-items: center;
  }
  :host [data-part=content]:is(.label) {
    padding-inline: var(--_button-padding-inline);
  }
  :host [data-part=content]:is(.label):is(.icon) {
    padding-inline-start: 4px;
    column-gap: 4px;
  }
  :host [data-part=content]:is(.label):is(.disclosure) {
    padding-inline-end: 4px;
    column-gap: 4px;
  }
  :host [data-part=label] {
    font-size: var(--_button-font-size);
    font-weight: 500;
  }
  :host [data-part=spinner] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
@layer variants {
  :host([variant=primary]) {
    --dds-button-background: var(--dds-button-primary-background);
    --dds-button-background-hover: var(--dds-button-primary-background-hover);
    --dds-button-color: var(--dds-button-primary-text);
  }
  :host([variant=secondary]) {
    --dds-button-background: var(--dds-button-secondary-background);
    --dds-button-background-hover: var(--dds-button-secondary-background-hover);
    --dds-button-color: var(--dds-button-secondary-text);
    --dds-button-box-shadow: inset 0 0 0 1px var(--dds-button-secondary-border);
  }
  :host([variant=tertiary]) {
    --dds-button-background: var(--dds-button-tertiary-background);
    --dds-button-background-hover: var(--dds-button-tertiary-background-hover);
    --dds-button-color: var(--dds-button-plain-text);
  }
  :host([variant=plain]) {
    --dds-button-background: transparent;
    --dds-button-background-hover: var(--dds-button-plain-background-hover);
    --dds-button-color: var(--dds-button-plain-text);
  }
}
@layer sizes {
  :host([size=s]) {
    --dds-button-font-size: var(--dds-button-font-size-s);
    --dds-button-size: var(--dds-button-size-s);
  }
  :host([size=m]) {
    --dds-button-font-size: var(--dds-button-font-size-m);
    --dds-button-size: var(--dds-button-size-m);
  }
  :host([size=l]) {
    --dds-button-font-size: var(--dds-button-font-size-l);
    --dds-button-size: var(--dds-button-size-l);
  }
  :host([expand]) {
    display: flex;
  }
  :host([expand]) [data-part=root] {
    inline-size: 100%;
  }
  @media (prefers-reduced-motion: no-preference) {
    :host([expand]) [data-part=root]:active {
      scale: 0.98;
    }
  }
}
@layer states {
  :host([loading]) [data-part=root] {
    cursor: wait;
    pointer-events: none;
  }
  :host([loading]) [data-part=content] {
    visibility: hidden;
  }
  :host([disabled]) {
    pointer-events: none;
    opacity: 0.5;
  }
  @media (hover: hover) {
    :host(:not([loading]):hover) {
      --dds-button-background: var(--_button-background-hover);
    }
  }
}