/* Buttons: button, [type=submit], [type=reset], [type=button], [role=button], file selector button */

/* Selector lists are kept flat. Nesting would raise button to the specificity of the attribute selectors. */

button {
  margin: 0;
  overflow: visible;
  font-family: inherit;
  text-transform: none;
}

/* Lets iOS and Safari style these */
button,
[type="submit"],
[type="reset"],
[type="button"] {
  appearance: button;
}

button,
[type="submit"],
[type="reset"],
[type="button"],
[type="file"]::file-selector-button,
[role="button"] {
  --pico-background-color: var(--pico-primary-background);
  --pico-border-color: var(--pico-primary-border);
  --pico-color: var(--pico-primary-inverse);
  --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 transparent);
  --pico-font-weight: 500;
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  border: var(--pico-border-width) solid var(--pico-border-color);
  border-radius: var(--pico-border-radius);
  outline: none;
  background-color: var(--pico-background-color);
  box-shadow: var(--pico-box-shadow);
  color: var(--pico-color);
  font-weight: var(--pico-font-weight);
  font-size: 1rem;
  line-height: var(--pico-line-height);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--pico-transition),
    border-color var(--pico-transition),
    color var(--pico-transition),
    box-shadow var(--pico-transition),
    transform var(--pico-transition);
}

/* Hover, active, focus and aria-current. The two parts per selector keep the v2.1.1 specificity. */
button:is([aria-current]:not([aria-current="false"])),
button:is(:hover, :active, :focus),
[type="submit"]:is([aria-current]:not([aria-current="false"])),
[type="submit"]:is(:hover, :active, :focus),
[type="reset"]:is([aria-current]:not([aria-current="false"])),
[type="reset"]:is(:hover, :active, :focus),
[type="button"]:is([aria-current]:not([aria-current="false"])),
[type="button"]:is(:hover, :active, :focus),
[type="file"]::file-selector-button:is(:hover, :active, :focus),
[role="button"]:is([aria-current]:not([aria-current="false"])),
[role="button"]:is(:hover, :active, :focus) {
  --pico-background-color: var(--pico-primary-hover-background);
  --pico-border-color: var(--pico-primary-hover-border);
  --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 transparent);
  --pico-color: var(--pico-primary-inverse);
}

/* Keyboard focus: a solid ring outside the button, in the focus color of the variant */
button:focus-visible,
[type="submit"]:focus-visible,
[type="reset"]:focus-visible,
[type="button"]:focus-visible,
[role="button"]:focus-visible {
  outline: var(--pico-outline-width) solid var(--pico-primary-focus);
  outline-offset: var(--pico-outline-width);
}

button:active,
[type="submit"]:active,
[type="reset"]:active,
[type="button"]:active,
[role="button"]:active {
  box-shadow: none;

  @media (prefers-reduced-motion: no-preference) {
    transform: scale(0.98);
  }
}

[type="submit"],
[type="reset"],
[type="button"] {
  margin-bottom: var(--pico-spacing);
}

/* Secondary. Reset buttons and the file selector button look secondary by default. */
:is(button, [type="submit"], [type="button"], [role="button"]).secondary,
[type="reset"],
[type="file"]::file-selector-button {
  --pico-background-color: var(--pico-secondary-background);
  --pico-border-color: var(--pico-secondary-border);
  --pico-color: var(--pico-secondary-inverse);
  cursor: pointer;
}

:is(button, [type="submit"], [type="button"], [role="button"]).secondary:is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ),
[type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
[type="file"]::file-selector-button:is(:hover, :active, :focus) {
  --pico-background-color: var(--pico-secondary-hover-background);
  --pico-border-color: var(--pico-secondary-hover-border);
  --pico-color: var(--pico-secondary-inverse);
}

:is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus-visible,
[type="reset"]:focus-visible {
  outline-color: var(--pico-secondary-focus);
}

/* Contrast */
:is(button, [type="submit"], [type="button"], [role="button"]).contrast {
  --pico-background-color: var(--pico-contrast-background);
  --pico-border-color: var(--pico-contrast-border);
  --pico-color: var(--pico-contrast-inverse);

  &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    --pico-background-color: var(--pico-contrast-hover-background);
    --pico-border-color: var(--pico-contrast-hover-border);
    --pico-color: var(--pico-contrast-inverse);
  }

  &:focus-visible {
    outline-color: var(--pico-contrast-focus);
  }
}

/* Outline */
:is(button, [type="submit"], [type="button"], [role="button"]).outline,
[type="reset"].outline {
  --pico-background-color: transparent;
  --pico-box-shadow: none;
  --pico-color: var(--pico-primary);
  --pico-border-color: var(--pico-primary);
}

:is(button, [type="submit"], [type="button"], [role="button"]).outline:is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ),
[type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
  /* A light wash of the text color instead of a fill */
  --pico-background-color: color-mix(in oklab, var(--pico-color) 8%, transparent);
  --pico-box-shadow: none;
  --pico-color: var(--pico-primary-hover);
  --pico-border-color: var(--pico-primary-hover);
}

/* [type=reset].outline is secondary here, as in v2.1.1 */
:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
[type="reset"].outline {
  --pico-color: var(--pico-secondary);
  --pico-border-color: var(--pico-secondary);
}

:is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ),
[type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
  --pico-color: var(--pico-secondary-hover);
  --pico-border-color: var(--pico-secondary-hover);
}

:is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
  --pico-color: var(--pico-contrast);
  --pico-border-color: var(--pico-contrast);

  &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
    --pico-color: var(--pico-contrast-hover);
    --pico-border-color: var(--pico-contrast-hover);
  }
}

:where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
:where([role="button"][aria-disabled="true"]),
:where(fieldset[disabled])
  :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
  opacity: 0.5;
  pointer-events: none;
}

/* Filled buttons turn neutral when disabled, the same in both schemes. A faded primary read as
   another component in the dark scheme. */
:is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]):not(.outline):is(
    [disabled],
    [role="button"][aria-disabled="true"],
    :where(fieldset[disabled]) *
  ) {
  --pico-background-color: var(--pico-secondary-background);
  --pico-border-color: var(--pico-secondary-background);
  --pico-color: var(--pico-muted-color);
  --pico-box-shadow: none;
  opacity: 0.7;

  /* The busy spinner follows the neutral fill, not the variant */
  &::before {
    filter: var(--_pico-secondary-icon-filter);
  }
}