.buttonReset {
  padding: 0;
  border: none;
  background: none;
}

:where(
    button,
    button[type],
    input[type="button"],
    input[type="submit"],
    input[type="reset"]
  ),
:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button,
.CTA-button {
  --button-background: var(--color-text-strong);
  --button-color: var(--color-surface-subtle);
  --button-border-color: var(--color-text-strong);
  --button-transform: translate(
    calc(-2px),
    calc(-2px)
  );
  --button-box-shadow: var(--shadow-near);
  --transition-duration: 0.16s;

  --button-background-hover: var(--color-brand-strong);
  --button-color-hover: var(--color-text-strong);
  --button-border-color-hover: var(--color-text-strong);
  --button-hover-transform: translate(
    calc(-1px),
    calc(-1px)
  );

  --button-hover-shadow: var(--shadow-nearest);


  --button-padding-inline: var(--space-near);

  background-color: var(--button-background);
  color: var(--button-color);
  border-width: var(--border-thin);
  border-color: var(--button-border-color);
  border-style: solid;
  padding-inline: var(--button-padding-inline);
  min-block-size: var(--button-height);
  padding-block: 0;
  font-family: var(--font-family-mono);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--font-weight-regular);
  font-size: inherit;
  cursor: pointer;
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  transition: box-shadow var(--transition-duration) var(--ease-2),
    transform var(--transition-duration) var(--ease-2);
  text-decoration: unset;
  box-shadow: var(--button-box-shadow);
  transform: var(--button-transform);
  will-change: transform;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  inset-block-start: 2px;
  inset-inline-start: 2px;


  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

:where(
    button,
    button[type],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .CTA-button
  ) {
  &:after {
    content: "" !important;
  }

  &:hover {
    --button-background: var(--button-background-hover) !important;
    --button-color: var(--button-color-hover) !important;
    --button-border-color: var(--button-border-color-hover) !important;
    --button-box-shadow: var(--button-hover-shadow) !important;
    --button-transform: var(--button-hover-transform) !important;
  }

  &:hover:after {
    inline-size: calc(100% + var(--space-near)) !important;
    block-size: calc(100% + var(--space-near)) !important;
    z-index: -1 !important;
    position: absolute !important;
    inset-block-start: 0 !important;
    inset-inline-start: 0 !important;
    pointer-events: none !important;
  }

  &:active {
    box-shadow: none;
    transform: none;
  }

  &[disabled] {
    --button-background: none !important;
    --button-background-hover: none !important;
    --button-color: var(--color-text-subtle) !important;
    --button-color-hover: var(--button-color) !important;
    --button-border-color: var(--color-text-subtle) !important;
    --button-border-color-hover: var(--button-border-color);

    box-shadow: none !important;
    transform: none !important;
    filter: contrast(0.64) opacity(0.64);
    cursor: not-allowed;
  }

  &.-active {
    background-color: var(--button-background-hover);
    color: var(--button-color-hover);
    border-color: var(--button-border-color-hover);

    box-shadow: none;
    transform: none;
  }

  &.-secondary {
    --button-background: var(--color-surface-subtle);
    --button-color: var(--color-text-subtle);
    --button-border-color: var(--color-text-strong);

    --button-background-hover: var(--color-surface-subtle);
    --button-color-hover: var(--color-text-strong);
    --button-border-color-hover: var(--color-text-strong);
  }

  &.-stealth {
    --button-background: transparent;
    --button-color: var(--color-text-strong);
    --button-border-color: transparent;

    --button-background-hover: transparent;
    --button-color-hover: var(--color-brand-strong);
    --button-border-color-hover: transparent;

    box-shadow: none !important;
    transform: none !important;
  }
}

:where(input[type="file"]) {
  color: var(--color-text-strong);
  background-color: var(--color-surface-strong);
  border: var(--border-thin) solid var(--color-text-strong);
  height: var(--button-height);
  padding-inline-end: var(--space-near);
}

:where(input[type="file"])::-webkit-file-upload-button,
:where(input[type="file"])::file-selector-button {
  margin-inline-end: var(--space-near);
  cursor: pointer;
  box-shadow: none;
  min-block-size: calc(var(--button-height) - var(--border-thin));
  border: none;
  border-inline-end: var(--border-thin) solid var(--color-text-strong);
  transform: none;
  inset-block-start: 0;
  inset-inline-start: 0;
}

:where(button[type="reset"], .CTA-button.-destructive) {
  padding-inline-start: 0 !important;
  --button-background-hover: var(--color-status-error) !important;

  &:before {
    border: var(--border-thin) solid transparent;
    content: "⨯";
    background: var(--button-color);
    color: var(--button-background);
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: var(--button-padding-inline);
    block-size: 1em;
    inline-size: 1em;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-lg);
    position: relative;
    transform: translateX(25%);
  }

  &:hover:before {
    background: var(--button-color);
    color: var(--color-status-error);
  }

  @supports not (aspect-ratio: 1) {
    padding-inline-start: var(--button-padding-inline);

    &:before {
      display: none;
    }
  }
}