.btn {
  --btn-hover-brightness: 0.95;

  background-color: var(--btn-background, var(--color-canvas));
  border: var(--btn-border-size, 1px) solid var(--btn-border-color, #555);
  border-radius: var(--btn-border-radius, 0.25rem);
  cursor: pointer;
  display: inline-flex;
  font-size: var(--text-normal);
  padding: var(--btn-padding, 0.5rem 1rem);
  width: var(--btn-width, auto);

  &:hover {
    filter: brightness(var(--btn-hover-brightness));
  }
}

.btn--small {
  --btn-padding: 0.25rem 0.5rem;
  font-size: var(--text-small);
}

.btn--large {
  --btn-padding: 0.75rem 1.25rem;
  font-size: var(--text-medium);
  font-weight: 600;
}

.btn-group {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;

  .btn {
    flex: 0 0 auto;
  }
}

.btn--round {
  border-radius: 99em;
}

.btn--danger {
  --btn-background: oklch(var(--lch-red-lighter));
  --btn-border-color: oklch(var(--lch-red-darker));
  --btn-hover-brightness: 0.97;

  align-items: center;
  color: oklch(var(--lch-red-darker));
  font-weight: 600;
  gap: 0.4rem;
}