/* All buttons */
:where(button),
:where(:is(a, summary).button) {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-family-text);
  text-decoration: none;
  display: inline-flex;
  font-size: 0.875rem; /* 14px */
  background: transparent;
  border: none;
  color: var(--color-text-primary);
}

/* Multiple variants */
:where(
    :is(button, :is(a, summary).button):is(
        .primary,
        .secondary,
        .tertiary,
        .destructive
      )
  ) {
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-medium);
  gap: var(--space-2x);
  border-radius: var(--border-radius-primary);
  border-style: solid;
  border-width: var(--border-width-secondary);
  padding: var(--space-2x) var(--space-6x);
  line-height: 20px;
}

:where(:is(button, .button).icon) {
  border-radius: var(--border-radius-primary);
  padding: var(--space-1x);
  width: min-content;
  height: min-content;
}

:where(
    :is(button, :is(a, summary).button):is(
        .primary,
        .secondary,
        .tertiary,
        .destructive
      )
      :is(img, svg)
  ) {
  fill: currentColor; /** Inherits color from text color **/
  width: var(--space-4x);
  height: var(--space-4x);
}

:where(
    :is(button, :is(a, summary).button):not(.destructive.tertiary):is(
        :focus-visible,
        .focus-visible
      )
  ) {
  outline: 0;
  box-shadow:
    0px 0px 0px 4px var(--color-border-interactive-focus),
    0px 12px 32px -12px rgba(12, 22, 44, 0.32);
}

:where(button.primary),
:where(:is(a, summary).button.primary) {
  background-color: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--color-text-contrast);
}
:where(
    :is(button, :is(a, summary).button):is(
        .primary,
        .secondary,
        .destructive
      ):is(.active, :active, .focus-visible, :focus-visible, .hover, :hover)
  ) {
  border-color: var(--blue-800);
  background-color: var(--blue-800);
}

:where(button.destructive),
:where(:is(a, summary).button.destructive) {
  background-color: var(--red-600);
  border-color: var(--red-600);
  color: var(--color-text-contrast);
}

/** Secondary **/
:where(button.secondary),
:where(:is(a, summary).button.secondary) {
  background-color: var(--white);
  border-color: var(--blue-600);
  color: var(--blue-600);
}

:where(
    :is(button, :is(a, summary).button).secondary:is(
        :active,
        .active,
        :focus-visible,
        .focus-visible,
        :hover,
        .hover
      )
  ) {
  background-color: var(--blue-100);
  border-color: var(--blue-800);
  color: var(--blue-800);
}

:where(
    :is(button, :is(a, summary).button).destructive:is(
        :active,
        .active,
        :focus-visible,
        .focus-visible,
        :hover,
        .hover
      )
  ) {
  background-color: var(--red-800);
  border-color: var(--red-800);
  color: var(--color-text-contrast);
}

:where(:is(button, :is(a, summary).button).secondary.destructive) {
  color: var(--red-600);
  border-color: var(--red-600);
}

:where(
    :is(button, :is(a, summary).button).secondary.destructive:is(
        :active,
        .active,
        :focus-visible,
        .focus-visible,
        :hover,
        .hover
      )
  ) {
  background-color: var(--red-800);
  background-color: var(--red-100);
  border-color: var(--red-800);
  color: var(--red-800);
}

/* Disabled */
:where(button:disabled),
:where(:is(a, summary).button.disabled) {
  border-color: var(--gray-200);
  background-color: var(--color-background-disabled);
  color: var(--color-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
  outline: 0;
}

:where(button:disabled img),
:where(:is(a, summary).button.disabled img) {
  opacity: 0.5;
}

:where(button.secondary:disabled),
:where(:is(a, summary).button.secondary.disabled) {
  border-color: var(--color-border-disabled);
  background-color: var(--white);
  color: var(--color-text-disabled);
}

/** Tertiary **/
:where(button.tertiary),
:where(:is(a, summary).button.tertiary) {
  background: none;
  border: transparent;
  outline: none;
  color: var(--blue-600);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width-secondary);
  text-underline-position: under;
  line-height: 1.5rem;
}

:where(
    :is(button, :is(a, summary).button).tertiary:is(
        :active,
        .active,
        :focus-visible,
        .focus-visible,
        :hover,
        .hover
      )
  ) {
  color: var(--blue-800);
}

:where(
    :is(button, :is(a, summary).button).tertiary:is(
        :focus-visible,
        .focus-visible
      )
  ) {
  text-decoration-thickness: 4px;
  box-shadow: none;
}

:where(:is(button, :is(a, summary).button).tertiary.destructive) {
  color: var(--red-600);
}

:where(
    :is(button, :is(a, summary).button).tertiary.destructive:is(
        :active,
        .active,
        :focus-visible,
        .focus-visible,
        :hover,
        .hover
      )
  ) {
  color: var(--red-800);
}

:where(:is(button, :is(a, summary).button).tertiary:is(:disabled, .disabled)) {
  color: var(--color-text-disabled);
}

/* Tab */
:where(button[role='tab']) {
  justify-content: center;
  font-weight: var(--font-weight-medium);
  font-size: 1rem; /* 16px */
  background: none;
  padding: var(--space-4x) var(--space-6x);
  border-bottom: var(--border-width-secondary) solid var(--color-border-primary);
  line-height: 22px;
}

:where(button[role='tab']) span:not(.count) {
  font-weight: var(--font-weight-medium);
  font-size: 1rem; /* 16px */
  line-height: 22px;
  color: inherit;
}

:where(button[role='tab']:is(.selected, [aria-selected='true'])) {
  color: var(--blue-600);
  border-bottom-color: var(--blue-600);
}

:where(button[role='tab']:is([aria-disabled='true'], .disabled, :disabled)) {
  outline: 0;
  cursor: not-allowed;
  color: var(--color-text-disabled);
}

:where(
    button[role='tab']:is(:hover, .hover, :focus-visible, .focus-visible):not(
        [disabled],
        .disabled
      )
  ) {
  color: var(--blue-800);
  border-bottom-color: var(--blue-800);
}

/* Large  */
:where(:is(button, :is(a, summary).button):not([role='tab']).large) {
  font-size: 1rem;
  padding: 14px var(--space-8x);
  line-height: 1.5;
}

::where(:is(button, :is(a, summary).button).large.tertiary:not([role='tab'])) {
  padding: var(--space-4x) var(--space-8x);
}

:where(
    :is(button, :is(a, summary).button).large:not([role='tab']) :is(svg, img)
  ) {
  width: var(--space-6x);
  height: var(--space-6x);
}