.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xxs);

  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  line-height: 1;

  height: var(--component-size-md);
  min-block-size: var(--component-size-md);

  padding-inline: var(--spacing-sm);
  padding-block: var(--spacing-xs);

  border-width: var(--border-width-thin, 1px);
  border-style: solid;
  border-color: transparent;

  border-radius: var(--border-radius-default);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.buttonLink {
  color: inherit;
  text-decoration: none;
  user-select: default;
}

.button:hover {
  transition:
    background-color var(--transition-fast) var(--ease-standard),
    color var(--transition-fast) var(--ease-standard),
    border-color var(--transition-fast) var(--ease-standard),
    box-shadow var(--transition-fast) var(--ease-standard);
}

.button:focus-visible {
  outline: none;
  border-color: var(--color-border-selected);
  box-shadow: inset 0 0 0 1px var(--color-border-selected);
}

.round {
  border-radius: 100%;
}

.rounded {
  border-radius: var(--border-radius-rounded);
}

.button:disabled,
.button[aria-disabled='true'] {
  cursor: not-allowed;
  background-color: var(--color-disabled-bg);
  border-color: transparent;
  color: var(--color-disabled-fg);
  opacity: 0.5;
}

.button:is(:disabled, [aria-disabled='true']):hover {
  background-color: var(--color-disabled-bg);
  border-color: transparent;
  color: var(--color-disabled-fg);
}

/* ==========================================================================
 * LINK STYLE
 * ======================================================================= */

.link {
  text-decoration: none;
  font-size: var(--font-size-sm);
  color: var(--color-link);
  transition:
    color var(--transition-fast) var(--ease-standard),
    text-decoration-color var(--transition-fast) var(--ease-standard);
  text-underline-offset: 0.15em;
}

.link:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Icons */
.button svg,
.icon svg {
  inline-size: var(--icon-size-md);
  block-size: var(--icon-size-md);
}

.icon {
  display: inline-flex;
}

/* ==========================================================================
 * SIZES
 * ======================================================================= */

.button.sm {
  height: var(--component-size-sm);
  min-block-size: var(--component-size-sm);
  padding-inline: var(--spacing-sm);
}

.button.sm {
  gap: var(--spacing-xxs);
}
.button.sm svg {
  inline-size: var(--icon-size-sm);
  block-size: var(--icon-size-sm);
}

.button.lg {
  height: var(--component-size-lg);
  font-size: var(--font-size-md);
  min-block-size: var(--component-size-lg);
  padding-inline: var(--spacing-lg);
}

.button.fullWidth {
  width: 100%;
}

/* ==========================================================================
 * VARIANTS (semantic token-based)
 * ======================================================================= */

.primary {
  background-color: var(--button-bg-primary);
  color: var(--button-fg-primary);
  border-color: transparent;
}

.primary:hover {
  background-color: var(--button-bg-primary-hover);
}

.secondary {
  background-color: var(--button-bg-secondary);
  color: var(--button-fg-secondary);
  border-color: var(--button-border-secondary);
}

.secondary:hover {
  background-color: var(--button-bg-secondary-hover);
  border-color: var(--color-border-strong);
}

.default {
  background-color: var(--opac-bg-default);
  color: var(--color-fg-default);
  border-color: transparent;
}

.default:hover {
  background-color: var(--opac-bg-dark);
  border-color: transparent;
}

.default:focus-visible {
  outline: none;
  border-color: var(--color-border-selected);
  box-shadow: inset 0 0 0 1px var(--color-border-selected);
}

.outlined {
  background-color: transparent;
  color: var(--color-fg-default);
  border-width: var(--border-width-thin, 1px);
  border-style: solid;
  border-color: var(--color-border-default);
}

.outlined:not(.active):hover {
  background-color: var(--color-bg-hover-subtle);
  border-color: var(--color-border-strong);
}

.success {
  background-color: transparent;
  color: var(--color-status-success-fg);
  border-color: var(--color-status-success-border);
}

.success .icon {
  color: var(--color-status-success);
}

.success:hover {
  border-color: var(--color-fg-default);
}

.danger {
  background-color: transparent;
  color: var(--color-status-error-fg);
  border-color: var(--color-status-error-border);
}

.danger .icon {
  color: var(--color-status-error);
}

.danger:hover {
  border-color: var(--color-fg-default);
}

.button.inline {
  background-color: transparent;
  border-color: transparent;
  padding: var(--spacing-xxs);
  color: var(--color-fg-default);
}

.button.inline:not(.sm):not(.lg):not(.xs) {
  min-block-size: unset;
  block-size: unset;
  height: unset;
}

.button.inline:hover {
  background-color: var(--opac-bg-light);
}

.button.inline:focus-visible {
  outline: none;
  background-color: var(--opac-bg-light);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--color-border-selected);
}

.active {
  background-color: var(--button-bg-primary);
  color: var(--button-fg-primary);
  border-color: var(--color-border-selected);
}

.inline.active {
  color: var(--button-bg-primary);
}

.active:hover {
  background-color: var(--button-bg-primary-hover);
}

.inline.active:hover {
  color: var(--button-bg-primary-hover);
}

.header {
  background-color: transparent;
  color: var(--color-navbar-fg);
  border-color: var(--color-navbar-border);
}

.header:hover {
  background-color: transparent;
  border-color: var(--color-navbar-fg);
}

.header:focus-visible {
  outline: none;
  border-color: var(--color-navbar-fg);
  box-shadow: inset 0 0 0 1px var(--color-navbar-fg);
}

.header.active {
  background-color: color-mix(in srgb, var(--color-navbar-fg) 16%, transparent);
  color: var(--color-navbar-fg);
  border-color: var(--color-navbar-fg);
}

.header.active:hover {
  background-color: color-mix(in srgb, var(--color-navbar-fg) 16%, transparent);
  border-color: var(--color-navbar-fg);
}

.button.xs {
  height: auto;
  min-block-size: 0;
  padding-block: 0;
  padding-inline: var(--spacing-xs);
  font-size: var(--font-size-xs);
}

.button.xs svg {
  inline-size: var(--icon-size-sm);
  block-size: var(--icon-size-sm);
}