@import "/UI/Styles/_Theme.scss";
@import "/UI/Styles/_Fonts.scss";
@import "/UI/Components/Tile/Tile.scss";
@import "/UI/Components/Segmented/Segmented.scss";
@import "/UI/Components/Button/Button.scss";
@import "/UI/Components/Chip/Chip.scss";
SoundBoardPanel
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: all;
	overflow: hidden;

	.sb
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: column;
		background-color: $bg-0;
		overflow: hidden;
	}

	.sb-shell
	{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: column;
		flex-grow: 1;
		min-height: 0;
		padding: 20px 24px 18px;
		overflow: hidden;
	}

	.sb-topbar
	{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		height: 64px;
		min-height: 64px;
		max-height: 64px;
		margin-bottom: 14px;
		padding-bottom: 14px;
		border-bottom: 1px solid $line;
		flex-shrink: 0;
		flex-wrap: nowrap;
		overflow: hidden;
	}

	.sb-brand-block
	{
		display: flex;
		align-items: center;
		gap: 12px;
		min-width: 0;
		flex-grow: 1;
	}

	.sb-status-led
	{
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: $bg-2;
		border: 1px solid $line;
		flex-shrink: 0;

		&.is-live
		{
			background-color: $success;
			border-color: $success-line;
		}
	}

	.sb-brand-copy
	{
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.sb-eyebrow
	{
		font-size: $fs-1;
		font-weight: 700;
		letter-spacing: $ls-xwide;
		color: $text-faint;
		font-family: $font-mono;
	}

	.sb-title
	{
		font-size: $fs-5;
		font-weight: 800;
		color: $text;
		font-family: $font-primary;
		white-space: nowrap;
		overflow: hidden;
	}

	.sb-voice-chip
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		width: 128px;
		height: 52px;
		min-width: 128px;
		max-width: 128px;
		padding: 8px 12px;
		border-radius: 4px;
		background-color: $bg-2;
		border: 1px solid $line-strong;
		flex-shrink: 0;
		overflow: hidden;
	}

	.sb-voice-chip-head
	{
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 8px;
	}

	.sb-voice-chip-label
	{
		font-size: $fs-1;
		font-weight: 700;
		letter-spacing: $ls-wide;
		color: $text-faint;
		font-family: $font-mono;
	}

	.sb-voice-chip-value
	{
		font-size: $fs-4;
		font-weight: 800;
		line-height: 1;
		color: $accent;
		font-family: $font-mono;
	}

	.sb-voice-meter-stack
	{
		width: 100%;
		height: 18px;
		min-height: 18px;
		max-height: 18px;
		flex-direction: column;
		justify-content: flex-end;
		gap: 2px;
		overflow: hidden;
	}

	.sb-voice-meter-tier
	{
		width: 100%;
		height: 3px;
		min-height: 3px;
		max-height: 3px;
		border-radius: 999px;
		background-color: $bg-inset;
		overflow: hidden;
	}

	.sb-voice-meter-fill
	{
		height: 100%;
		border-radius: 999px;
		transition: width 0.16s ease;

		&.is-chaos
		{
			filter: brightness(1.2);
		}
	}

	.sb-tabs
	{
		margin-bottom: 14px;
		flex-shrink: 0;
		flex-wrap: wrap;
	}

	.sb-board
	{
		flex-grow: 1;
		flex-shrink: 1;
		min-height: 0;
		margin-bottom: 14px;
		border: 1px solid $line;
		background-color: $bg-1;
		flex-direction: column;
		overflow: hidden;
	}

	.sb-board-scroll
	{
		flex-grow: 1;
		flex-shrink: 1;
		min-height: 0;
		width: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
		pointer-events: all;
	}

	.tile-grid
	{
		flex-direction: row;
		flex-wrap: wrap;
		gap: 12px;
		padding: 8px;
		pointer-events: all;

		.tile
		{
			pointer-events: all;
			flex-shrink: 0;
		}
	}

	.sb-pad-grid
	{
		padding: 4px;
	}

	.tile
	{
		width: 112px;
	}

	.tile-swatch
	{
		height: 64px;
	}

	.sb-controls
	{
		display: flex;
		align-items: center;
		gap: 12px;
		flex-shrink: 0;
	}

	.sb-now-playing
	{
		flex-grow: 1;
		display: flex;
		align-items: center;
		gap: 10px;
		min-width: 0;
		padding: 10px 14px;
		background-color: $bg-2;
		border: 1px solid $line;
	}

	.sb-now-playing-dot
	{
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: $line-strong;
		flex-shrink: 0;

		&.is-live
		{
			background-color: $accent;
		}
	}

	.sb-now-playing-text
	{
		font-size: $fs-2;
		font-weight: 600;
		color: $text-dim;
		font-family: $font-mono;
		white-space: nowrap;
		overflow: hidden;
	}

	.sb-kill-btn
	{
		min-width: 148px;
		flex-shrink: 0;
	}

	&.is-wide
	{
		.tile
		{
			width: 120px;
		}
	}

	&.is-medium
	{
		.sb-shell
		{
			padding: 18px 20px 16px;
		}

		.sb-title
		{
			font-size: $fs-4;
		}

		.tile
		{
			width: 104px;
		}
	}

	&.is-compact
	{
		.sb-shell
		{
			padding: 14px 14px 12px;
		}

		.sb-voice-chip
		{
			width: 116px;
			min-width: 116px;
			max-width: 116px;
		}

		.tile
		{
			width: 96px;
		}

		.tile-swatch
		{
			height: 56px;
		}
	}

	&.is-tight
	{
		.sb-shell
		{
			padding: 12px 10px 10px;
		}

		.sb-topbar
		{
			height: 58px;
			min-height: 58px;
			max-height: 58px;
		}

		.sb-voice-chip
		{
			width: 108px;
			min-width: 108px;
			max-width: 108px;
			height: 48px;
			min-height: 48px;
			max-height: 48px;
		}

		.sb-voice-chip-value
		{
			font-size: $fs-3;
		}

		.sb-title
		{
			font-size: $fs-3;
		}

		.sb-tabs
		{
			flex-wrap: wrap;
		}

		.tile
		{
			width: 88px;
		}

		.tile-swatch
		{
			height: 50px;
		}

		.sb-controls
		{
			flex-wrap: wrap;
		}

		.sb-now-playing
		{
			width: 100%;
			order: 3;
		}

		.sb-kill-btn
		{
			width: 100%;
			order: 2;
		}
	}

	&.has-voices
	{
		.sb-topbar
		{
			border-bottom-color: $accent-line;
		}
	}
}