/* Buttons, form fields and the segmented control. */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: calc(14px * var(--ui-scale));
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.15s, opacity 0.15s, transform 0.1s;
}

.btn:active:not(:disabled) {
	transform: scale(0.98);
}

.btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.btn-primary {
	width: 100%;
	background: var(--accent);
	color: var(--accent-text);
}

.btn-primary:hover:not(:disabled) {
	background: var(--accent-hover);
}

.btn-secondary {
	background: var(--surface);
	border-color: var(--border-strong);
}

.btn-secondary:hover:not(:disabled) {
	background: var(--surface-2);
}

.btn-quiet {
	background: none;
	color: var(--muted);
	font-weight: 400;
}

.btn-quiet:hover {
	color: var(--text-strong);
}

.form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.form > .btn-primary {
	margin-top: 8px;
}

/* buttons side by side are one height: none stretched to the row, none pushed down by form spacing */
.modal-actions,
.row,
.set-inline,
.adm-actions-end,
.adm-actions-split {
	align-items: center;
}

.modal-actions > .btn,
.row > .btn,
.set-inline > .btn,
.adm-actions-end > .btn,
.adm-actions-split > .btn {
	align-self: center;
	margin-top: 0;
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.field-label {
	font-weight: 500;
}

.field-hint {
	font-size: calc(12px * var(--ui-scale));
	color: var(--faint);
}

.field-hint-error,
.form-error {
	color: var(--danger);
}

.form-error {
	margin: 0;
}

.input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius);
	background: var(--surface);
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder {
	color: var(--faint);
}

.input:focus {
	border-color: var(--muted);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

.input-mono {
	font-family: var(--mono);
	text-transform: uppercase;
}

.input-code {
	font-family: var(--mono);
	font-size: calc(24px * var(--ui-scale));
	text-align: center;
	letter-spacing: 0.5em;
	padding-left: calc(12px + 0.5em);
}

.badge {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--muted);
	font-size: calc(12px * var(--ui-scale));
	vertical-align: middle;
}

/* ---- segmented control ---- */

.seg {
	position: relative;
	display: flex;
	flex: none;
	height: 100%;
	padding: 2px;
	border-radius: 999px;
	background: var(--surface-2);
	touch-action: pan-y;
	user-select: none;
}

.seg-thumb {
	position: absolute;
	top: 2px;
	bottom: 2px;
	left: 0;
	border-radius: 999px;
	background: var(--surface);
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
	opacity: 0;
}

:root[data-theme="dark"] .seg-thumb {
	background: var(--bg);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .seg-thumb {
		background: var(--bg);
	}
}

.seg-thumb.is-placed {
	opacity: 1;
}

.seg-thumb.animate:not(.is-dragging) {
	transition: transform 0.3s var(--ease), width 0.3s var(--ease);
}

.seg-option {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: calc(1.5em + 8px); /* icon-only options as tall as ones with a word (a line of text, not the icon's 14 px) */
	padding: 4px 10px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--muted);
	font-size: calc(13px * var(--ui-scale));
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.3s;
}

.seg-option:hover {
	color: var(--text);
}

.seg-option.is-current {
	color: var(--text-strong);
	cursor: grab;
}

.seg-option.is-current:active {
	cursor: grabbing;
}

.input-code::placeholder {
	font-family: var(--font);
	font-size: calc(15px * var(--ui-scale));
	letter-spacing: normal;
}

/* stacked (segmented.js vertical): long labels one under another, the thumb sliding up and down */
.seg--vertical {
	flex-direction: column;
	height: auto;
	border-radius: 16px;
	touch-action: pan-x;
}

.seg--vertical .seg-thumb {
	top: 0;
	right: 2px;
	bottom: auto;
	left: 2px;
	border-radius: 14px;
}

.seg--vertical .seg-thumb.animate:not(.is-dragging) {
	transition: transform 0.3s var(--ease), height 0.3s var(--ease);
}

/* stacked because the row did not fit: on the right of its line */
.seg--auto.seg--vertical {
	margin-left: auto;
}

.seg--vertical .seg-option {
	justify-content: center;
	padding: 6px 14px;
	border-radius: 14px;
}