:root {
  --btn-size: 2.65em;
}

.btn {
  align-items: center;
  background-color: var(--btn-background, var(--btn-secondary-bg));
  border-radius: var(--btn-border-radius, 2em);
  border: var(--btn-border-size, 1px) solid var(--btn-border-color, var(--color-border-darker));
  color: var(--btn-color, var(--btn-secondary-color));
  cursor: pointer;
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 600;
  gap: 0.5em;
  justify-content: center;
  padding: var(--btn-padding, 0.55em 1.2em);
  text-decoration: none;
  transition: box-shadow 150ms ease, filter 150ms ease;
}

.btn:hover {
  box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
  filter: brightness(0.97);
  text-decoration: none;
}

.btn--primary {
  --btn-background: oklch(var(--lch-blue));
  --btn-border-color: oklch(var(--lch-blue));
  --btn-color: var(--color-text-reversed);
}

.btn--primary:hover {
  filter: brightness(1.08);
}

.btn--danger {
  --btn-background: transparent;
  --btn-border-color: transparent;
  --btn-color: var(--color-negative);
  --btn-padding: 0;
}

.btn--small {
  font-size: 0.8125rem;
  --btn-padding: 0.4em 0.9em;
}

.btn--ghost {
  --btn-background: transparent;
  --btn-border-color: var(--color-border-dark);
  --btn-color: var(--color-text-muted);
}

.btn--ghost:hover {
  --btn-color: var(--color-text);
  --hover-color: var(--color-border);
}

.btn--block {
  inline-size: 100%;
}

.panel-main .btn {
  font-size: 1.0625rem;
  --btn-padding: 0.72em 1.45em;
}

.panel-main .btn--small {
  font-size: 1rem;
  --btn-padding: 0.62em 1.25em;
}