.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-white);
  background-color: var(--color-primary-800);

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

.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--sm {
    width: 2.75rem;
    height: 2.75rem;
  }
}

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

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