/*
This file is part of Vodka.

Vodka is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Vodka is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with Vodka.  If not, see <https://www.gnu.org/licenses/>.
*/

/* follows contract.css -- both are things the system hands you rather than
   things you type */
/* (comment by Claude) */

.clip {
	display: none;
}

.clip.exploded {
	border-radius: 6px;
	font-style: italic;
	font-family: monospace;
	color: var(--page-text);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: 11px;
	background-color: var(--value-background);
	border: 1px solid var(--unselected-border);
	padding-right: 6px;
	padding-left: 4px;
	padding-bottom: 6px;
	padding-top: 6px;
}

.clip.exploded.newselected {
	border: 3px solid var(--selected-border);
}

.clippos {
	font-variant-numeric: tabular-nums;
	color: var(--clip-position);
}

.clip .sysglyph {
	color: var(--clip-glyph);
}


/*
The mute button: a small square under the infinity sign, hollow when the clip
can be heard and filled when it cannot. No label -- what it is is obvious once
you have pressed it once, and a clip is read at a glance rather than studied.
*/
.clip .sysglyphcol {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.clip .clipmute {
	width: 11px;
	height: 11px;
	margin-top: 5px;
	border: 1px solid var(--clip-glyph);
	cursor: pointer;
	/* the m, small enough to sit inside the square and upright because the rest
	   of a clip is italic and a single leaning letter in a box reads badly */
	/* (comment by Claude) */
	font-family: monospace;
	font-style: normal;
	font-size: 8px;
	line-height: 1;
	color: var(--clip-glyph);
	display: flex;
	align-items: center;
	justify-content: center;
}

.clip .clipmute.on {
	background-color: var(--clip-glyph);
	/* the square is filled now, so the letter is the hole in it */
	/* (comment by Claude) */
	color: var(--value-background);
}

/*
Something this clip plays goes past full scale: a filled square above the mute
button, the same size and shape so the column stays a column.

Only drawn when it is true. There is no empty outline waiting to be filled in,
because an indicator that is always there is one more thing to read on every
clip, and this one is worth noticing precisely because it usually is not there.

Orange, not red. It is worth knowing and it is not a failure: plenty of things
are meant to be driven hard, and an alarm colour for every one of them is an
alarm you learn to ignore.

(comment by Claude)
*/
.clip .clipclipping {
	width: 11px;
	height: 11px;
	margin-top: 5px;
	background-color: var(--clip-clipping);
}

/* silent for either reason, including one you cannot see from here */
.clip.muted .sysglyph {
	opacity: 0.35;
}