.btn-primary {
  background: var(--ui-primary-bg);
  border-color: transparent;
  color: var(--ui-primary-text);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 0 0 3px var(--ui-primary-ring);
}

.btn-ghost {
  background: var(--ui-ghost-bg);
  border-color: var(--ui-ghost-border);
  color: var(--text);
}

.btn-ghost:hover:not(:disabled) {
  border-color: var(--ui-ghost-hover-border);
}

.btn-ghost:disabled {
  opacity: var(--ui-disabled-opacity);
  cursor: default;
}

.tgl {
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--ui-ghost-bg);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease;
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
}

.tgl.active {
  border-color: var(--accent);
  background: color-mix(in srgb, black 62%, var(--accent) 38%);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, transparent 72%, var(--accent) 28%),
    0 0 0 1px color-mix(in srgb, transparent 92%, var(--accent) 8%);
}

.tgl:hover,
.tgl:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.tgl:active {
  transform: translateY(1px);
}