/*
 * base.css - Shared widget styles loaded alongside every theme.
 * Theme-specific colors are controlled via CSS variables defined in
 * each theme's :root block.
 *
 * Default variable values (light/neutral baseline):
 *   --switch-off-color:   #ccc
 *   --switch-on-color:    #5555DD
 *   --switch-thumb-color: white
 *   --border-color:       (required, defined per theme)
 */

/* - Ensure the HTML hidden attribute is never overridden by display rules */
[hidden] {
	display: none !important;
}

/* - Summary: support both bare <input> and .switch label in summary rows */
summary > input,
summary > label.switch {
	float: right;
}

/* - Switch widget -------------------------------------------------------- */
.switch {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 18px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--switch-off-color, #ccc);
	transition: 0.3s;
	border-radius: 24px;
}

.slider::before {
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 2px;
	bottom: 2px;
	background-color: var(--switch-thumb-color, white);
	transition: 0.2s;
	border-radius: 50%;
}

input:checked + .slider {
	background-color:  #5555dd;
}

input:checked + .slider::before {
	transform: translateX(18px);
}

/* - DSP Load meter ------------------------------------------------------- */
.dsp-load-wrapper {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 50%;
}

.dsp-load-wrapper meter {
	flex: 1 1 0;
	min-width: 0;
	height: 1.2em;
	display: block;
}

.dsp-load-wrapper output {
	flex-shrink: 0;
	width: 50%;
	min-width: 1.5em;
	text-align: right;
}

/* - Form layout ---------------------------------------------------------- */
.custom-form {
	outline: none; /*2px solid #aaa;*/
	background-color: none; /*#f9f9f9;*/
	border: 0;
	border-radius: 8px;
	padding: 10px 15px;
	display: flex;
	flex-direction: column;
}

.form-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 3px;
	width: 100%;
	cursor: pointer;
}


.form-row output {
    display: flex;
    padding: 2px;
	border: none; /*1px solid var(--border-color);*/
	border-radius: 2px;
    min-height: 1.4em;
    /*font-size: 1rem;*/
    width: 50%;
    justify-content: flex-end;
    align-items: center;
}


.form-row select {
	border: 1px solid var(--border-color);
	border-radius: 2px;
	display: inline-block;
	min-height: 1.1em;
	width: 50%;
}


.form-row input[type="range"]{
    display: flex;
	width: 50%;
}



.form-row button{
    display: flex;
	width: 50%;
	justify-content: center;
}

/* - DURec button active state -------------------------------------------- */
button[aria-pressed="true"] {
	outline: 2px solid currentColor;
	font-weight: bold;
}

.form-row input[type="text"],
.form-row input:not([type]) {
	border: 1px solid var(--border-color);
	border-radius: 2px;
	min-height: 1.2em;
	width: 50%;
	box-sizing: border-box;
}