.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.25;

  &:focus-visible {
    outline: 2px solid var(--color-primary-900);
    outline-offset: 2px;
  }
}

.btn--lg {
  padding: 0.5625rem 0.875rem;
  font-size: 0.875rem;
}

.btn--sm {
  padding: 0.3125rem 0.625rem;
  font-size: 0.71875rem;
}

.btn--primary {
  color: var(--color-primary-900);
  background-color: var(--color-brand-yellow);

  &:hover {
    background-color: var(--color-brand-yellow-hover);
    color: var(--color-primary-900);
  }
}

.btn--secondary {
  color: var(--color-armadillo-800);
  background-color: var(--color-white);
  border-color: var(--color-spring-wood-600);

  &:hover {
    background-color: var(--color-spring-wood-100);
    color: var(--color-armadillo-900);
  }
}

.btn--danger {
  color: var(--color-white);
  background-color: var(--color-danger);

  &:hover {
    background-color: var(--color-danger-hover);
    color: var(--color-white);
  }
}

.btn--ghost {
  color: var(--color-armadillo-700);
  background: transparent;
  border-color: transparent;

  &:hover {
    color: var(--color-armadillo-900);
    background: var(--color-spring-wood-100);
  }
}

.btn--icon {
  padding: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-full);
  background: var(--color-white);
  border-color: var(--color-spring-wood-600);
  color: var(--color-armadillo-700);

  &:hover {
    background: var(--color-spring-wood-100);
    color: var(--color-armadillo-900);
  }
}

.btn--icon.btn--lg {
  width: 2.5rem;
  height: 2.5rem;
}

.btn--icon.btn--sm {
  width: 1.75rem;
  height: 1.75rem;
}

@media (pointer: coarse) {
  .btn--icon,
  .btn--icon.btn--sm {
    width: 2.75rem;
    height: 2.75rem;
  }
}

/* Toolbar-sized icon button — matches the read-modes segmented control it sits
   beside, and (unlike the others) keeps that size on touch instead of taking the
   2.75rem target bump, so it doesn't tower over the control. The two-class
   selector outranks the coarse-pointer rule. */
.btn--icon.btn--icon--compact {
  width: 2rem;
  height: 2rem;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.btn--full-width {
  width: 100%;
}