Code Search

.switchcontrol
{
    flex-direction: row;
    width: 100px;
    min-height: 24px;
    align-items: center;
    cursor: pointer;

    .switch-frame
    {
        flex-grow: 0;
        flex-shrink: 1;
        width: 48px;
        height: 16px;
        background-color: #fff1;
        margin: 0px 5px;
        align-items: center;
        border-radius: 100px;
        transition: all 0.4s linear;

        .switch-inner
        {
            position: relative;
            flex-grow: 0;
            flex-shrink: 1;
            background-color: #999;
            width: 25px;
            height: 25px;
            border-radius: 100px;
            left: 20%;
            transform: translateX( -50% );
            transition: all 0.3s ease-out;
        }
    }

    &.active
    {
        .switch-frame
        {
            background-color: #fffa;
        }

        .switch-inner
        {
            left: 80%;
            background-color: #fff;
        }
    }
}

ColorAlphaControl
{
	gap: 0.5rem;
	flex-grow: 1;
	pointer-events: all;
	background: linear-gradient( to right, black, white );
	border-radius: 4px;
	padding: 2px;
	height: 12px;
	position: relative;
	cursor: pointer;
	border: 1px solid #333;

	&:hover
	{
		border: 1px solid #08f;
	}

	&:active
	{
		border: 1px solid #fff;
	}

	.handle
	{
		top: -5px;
		bottom: -5px;
		aspect-ratio: 1;
		border-radius: 100px;
		border: 2px solid #444;
		position: absolute;
		background-color: white;
		box-shadow: 2px 2px 16px #000a;
		transform: translateX( -50% );
		pointer-events: none;
	}
}

ColorSaturationValueControl
{
	width: 240px;
	height: 240px;
	background-color: red;
	position: relative;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid #333;

	&:hover
	{
		border: 1px solid #08f;
	}

	&:active
	{
		border: 1px solid #fff;
	}

	.handle
	{
		width: 16px;
		height: 16px;
		border-radius: 100px;
		border: 2px solid #444;
		position: absolute;
		background-color: white;
		box-shadow: 2px 2px 16px #000a;
		transform: translateX( -50% ) translateY( -50% );
		pointer-events: none;
		z-index: 100;
		z-index: 100;
	}

	.gradient
	{
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 4px;
		background: linear-gradient( to right, white, rgba( 255, 255, 255, 0 ) );

		&:after
		{
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 4px;
			background: linear-gradient( to top, black, rgba( 0, 0, 0, 0 ) );
		}
	}
}

.slidercontrol
{
    flex-direction: row;
    min-width: 50px;
    position: relative;
    flex-shrink: 0;
    flex-direction: row;
    cursor: pointer;
    gap: 8px;
    flex-grow: 1;
    align-items: center;
    pointer-events: all;

    > .inner
    {
        flex-direction: column;
        flex-shrink: 1;
        flex-grow: 1;
        min-height: 32px;
        justify-content: center;

        > .values
        {
            width: 100%;
            pointer-events: none;
            font-size: 14px;
            color: #aaa;

            > .left
            {
                flex-grow: 1;
            }
        }

        > .track
        {
            position: relative;
            background-color: #888;
            height: 7px;
            margin: 8px;
            align-items: center;
            border-radius: 4px;

            > .track-active
            {
                background-color: #fff;
                position: absolute;
                height: 100%;
                left: 0px;
                border-radius: 4px;
            }

            > .thumb
            {
                position: relative;
                background-color: #fff;
                border-radius: 100px;
                width: 16px;
                height: 16px;
                transform: translateX( -50% );
            }
        }
    }

    > .entry
    {
        flex-shrink: 0;
        flex-grow: 0;
        width: 50px;

        > numberentry
        {
            background-color: transparent;

            > .content-label
            {
                padding: 0 4px;
            }
        }
    }
}


.slidercontrol .value-tooltip
{
    position: absolute;
    bottom: 150%;
    left: -8px;
    z-index: 1000;
    flex-direction: column;

    > .label
    {       
        background-color: black;
        padding: 8px 12px;
        border-radius: 8px;
    }

    >.tail
    {
        bottom: -0px;
        background-color: black;
        width: 10px;
        height: 10px;
        transform: rotateZ(45 deg) translateX( 4px );
        position: absolute;
    }
}

ColorControl
{
	gap: 0.5rem;
	flex-grow: 1;
	pointer-events: all;
	background-color: #000a;
	border-radius: 4px;
	padding: 2px;
	height: 32px;
}

ColorControl TextEntry
{
	flex-grow: 1;
	flex-shrink: 0;
	color: #aaa;
	font-size: 1.2rem;

	&:hover, &:focus
	{
		color: #ddd;

		.icon
		{
			color: #3af;
		}
	}

	&:active
	{
		color: white;
	}
}

ColorControl > .colorswatch
{
	aspect-ratio: 1;
	border-radius: 4px;
	height: 100%;
	flex-shrink: 0;
	cursor: pointer;
	border: 2px solid #000;
}

ComponentHandle
{
	width: 38px;
	height: 38px;
	background-color: #eee;
	box-shadow: 2px 2px 16px black;
	border-radius: 20px;
	position: absolute;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transform: scale( 1 ) translateX( -50% ) translateY( -50% );
	z-index: 100;

	.icon
	{
		font-family: "Material Icons";
		color: #08f;
		font-size: 23px;
		pointer-events: none;
	}

	&:hover
	{
		opacity: 1;
		background-color: #fff;
	}

	&:active
	{
		border: 1px solid #08f;
		background-color: #fff;
		opacity: 1;
		transform: scale( 0.95 ) translateX( -50% ) translateY( -50% );
	}

	&.active
	{
		border: 2px solid #fff;
		background-color: #08f;
		opacity: 1;

		.icon
		{
			color: #fff;
		}
	}

	&:outro
	{
		transform: scale( 0 ) translateX( -50% ) translateY( -50% );
		transition: transform 0.2s ease-out;
	}
}

ControlSheetRow
{
	flex-direction: row;
	flex-shrink: 0;
	max-height: 32px;
	border-radius: 4px;

	&.hidden
	{
		display: none;
	}
}

ControlSheetRow > .left
{
	width: 150px;
	flex-shrink: 0;
	flex-grow: 0;
	padding: 6px;
}

ControlSheetRow > .right
{
	flex-grow: 1;
}

ControlSheetRow > .left > .title
{
	width: 150px;
	flex-shrink: 0;
	flex-grow: 0;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
}

ControlSheetRow > .right > textentry,
ControlSheetRow > .right numberentry
{
	background-color: #000a;
	flex-grow: 1;
	padding: 4px 8px;
	border-radius: 2px;
}

@import "/UI/Theme.scss";

PressableHud
{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	font-family: $body-font;
	font-size: 14px;
	font-weight: 600;
	z-index: 1000;
	opacity: 0.2;

	.crosshair
	{
		width: 12px;
		height: 12px;
		background-color: white;
		border-radius: 50%;
		box-shadow: 0px 0px 8px black;
		opacity: 0;
		transition: all 0.1s linear;
	}

	&.active
	{
		opacity: 1;

		.crosshair
		{
			opacity: 1;
		}
	}
}

$deadzone-x: 2vw;
$deadzone-y: 2vw;

$color-accent: #0094ff;
$color-text: #fafaff;

$title-font: "Poppins";
$body-font: "Inter";
$subtitle-font: "Poppins";

@import "/UI/Menu.scss";
@import "/UI/Hud.scss";

@import "/UI/Theme.scss";

FacePoseEditor
{
    flex-direction: column;
    width: 100%;
    max-height: 400px;
}

FacePoseEditor .group-header
{
    font-size: 11px;
    font-weight: 700;
    color: rgba( 255, 255, 255, 0.35 );
    padding: 6px 6px 2px 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

$menu-color:#cdf;
$menu-text: #fffa;
$menu-text-strong: #fff;
$menu-surface-soft: #0004;
$menu-accent: $color-accent;
$menu-accent-soft: rgba($color-accent, 0.13);
$menu-panel-bg: #0c202fcc;

.menu-header-bar
{
	border-radius: 8px 8px 0 0;
	z-index: 100;
	font-family: $title-font;
	font-weight: 600;
}

.menu-input
{
	background-color: $menu-surface-soft;
	border-radius: 8px;
	padding: 2px 10px;
}

.menu-segmented-group
{
	background-color: #0008;
	border-radius: 8px;
	overflow: visible;
}

.menu-mode-button
{
	color: $menu-text;
	font-size: 1rem;
	font-weight: 600;
	padding: 1rem;
	font-family: $subtitle-font;
	cursor: pointer;
	pointer-events: all;
	justify-content: center;
	align-items: center;
	overflow: visible;
	border-radius: 8px;

	.icon
	{
		margin-left: -4px;
		margin-top: -1.5px;
		padding-right: 4px;
		font-size: 1.5rem;
	}

	.title
	{
		font-size: 1.1rem;
		font-weight: 700;
	}

	&:hover
	{
		color: $menu-text-strong;
	}

	&.active
	{
		outline: 1px solid $menu-accent;
		background-color: rgba( $menu-accent, 0.2 );
		color: $menu-text-strong;
	}
}

.menu-icon-toggle-group
{
	background-color: $menu-surface-soft;
	border-radius: 8px;
	gap: 0.5rem;
	padding: 4px 4px;
	padding-left: 8px;
	align-items: center;

	IconPanel
	{
		width: 20px;
		aspect-ratio: 1;
		opacity: 0.35;
		align-items: center;
		cursor: pointer;

		&:hover
		{
			opacity: 0.7;
		}

		&.active
		{
			opacity: 1;
		}
	}
}

span
{
	&.grow
	{
		gap: 8px;

		> *
		{
			flex-grow: 1;
		}
	}
}

.menu-action
{
	color: $menu-text-strong;
	border: 1px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	padding: 6px 10px;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-weight: 600;

	label, .title
	{
		font-size: 14px;
	}

	IconPanel, .icon
	{
		font-size: 1.2rem;
	}

	&.disabled
	{
		pointer-events: none;
		opacity: 0.25;
	}

	&.soft
	{
		background-color: $menu-accent-soft;

		&:hover
		{
			background-color: rgba($color-accent, 0.4);
			sound-in: ui.button.over;
		}
	}

	&.primary
	{
		border-color: $menu-accent;

		&:hover
		{
			background-color: $menu-accent-soft;
			sound-in: ui.button.over;
		}
	}

	&.wide
	{
		width: 100%;
	}
}

.menu-filter-input
{
	width: 200px;
}

TextEntry 
{
	color: $color-text;
	font-family: $body-font;
}

$primary: red !default;
$primary-alt: white !default;

$switch-padding: 6px !default;

.button.popupbutton.dropdown
{
	cursor: pointer;
	transition: all .1s ease-out;
	position: relative;

	> .dropdown_indicator
	{
		position: absolute;
		right: 8px;
	}

	&.open
	{
		border-bottom-left-radius: 1px;
		border-bottom-right-radius: 1px;
		transition: border-radius 0.2s ease-out;
	}
}

select
{
	min-height: 40px;

	> option
	{
		display: none;
	}
}

.navigator-body
{
	&.hidden
	{
		display: none;
	}
}

@import "base/_splitcontainer.scss";
@import "base/_navigator.scss";

button
{
	cursor: pointer;
}

IconPanel
{
	font-family: Material Icons;
}

.is-half
{
	width: 50%;
}

.is-third
{
	width: 33%;
}

.is-quarter
{
	width: 25%;
}

button.has-subtitle
{
	position: relative;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding-left: 40px; // icon space

	.iconpanel
	{
		position: absolute;
		left: 5px;
		top: 0;
		bottom: 0;
		align-items: center;
	}

	.button-label
	{
		font-weight: bold;
	}

	.button-subtitle
	{
		font-size: 12px;
		opacity: 0.5;
		mix-blend-mode: lighten;
	}
}

.package-list
{
    flex-shrink: 1;
    flex-wrap: wrap;
    flex-grow: 1;

    h1
    {
        width: 100%;
        margin-top: 50px;
        font-size: 40px;
    }

    PackageCard
    {
        &:hover
        {
            sound-in: "ui.button.over";
        }
    }

    VirtualGrid
    {
        width: 100%;
        height: 100%;

        .cell
        {
            
        }
    }
}

.dropdown
{
	gap: 2px;
	flex-grow: 1;
	cursor: pointer;
	justify-content: flex-end;
	align-items: center;
	padding: 0px 12px;

	.button-right-column
	{
		flex-grow: 1;
	}
}

RootPanel
{
	font-family: Roboto;
	color: white;
}

IconPanel, i
{
	font-family: Material Icons;
	background-position: center;
	background-size: contain;
}

.tooltip
{
	background-color: rgba( black, 0.8 );
	border: 1px solid rgba( #555, 0.1 );
	padding: 10px;
	border-radius: 4px;
	color: white;
	font-family: Inter;
	font-weight: bold;
	transition: opacity 0.09s ease;
	opacity: 1;
	margin: 0px;

	&:intro, &:outro
	{
		opacity: 0;
	}
}

.textentry
{
	cursor: text;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	overflow: hidden;
	flex-direction: row;
	position: relative;
	padding: 10px;

	&.disabled
	{
		cursor: default;
	}

	&.is-multiline
	{
		align-items: flex-start;
		white-space: normal;
	}

	.content-label,
	.placeholder
	{
		flex-grow: 1;
	}

	.placeholder
	{
		opacity: 0.2;
		pointer-events: none;
	}

	.iconpanel
	{
		position: absolute;
		right: 0;
		padding-right: 10px;
		pointer-events: none;

		&.clearbutton
		{
			color: #fff;
			pointer-events: all;
			cursor: pointer;
			opacity: 0.1;

			&:hover
			{
				opacity: 0.5;
			}

			&:active
			{
				opacity: 1;
			}
		}
	}

	&:empty
	{
		.clearbutton
		{
			display: none;
		}
	}

	&.has-icon
	{
		padding-right: 30px;
	}

	.content-label,
	.prefix-label,
	.suffix-label,
	.placeholder
	{
		overflow: hidden;
	}

	.content-label
	{
		order: 1;
	}

	.suffix-label
	{
		order: 2;
	}

	.prefix-label,
	.suffix-label
	{
		flex-shrink: 0;
		opacity: 0.5;
	}

	&.invalid
	{
		box-shadow: 0px 0px 1px 2px #f8356b;
	}
}

.popup-panel
{
	background-color: #1b202c;
	flex-direction: column;
	color: #8e9ec2;
	transition: all 0.1s ease-out;
	position: absolute;
	z-index: 2000;
	min-height: 20px;
	min-width: 10px;
	overflow: scroll;
	pointer-events: all;
	box-shadow: 3px 3px 64px #000;
	border-radius: 4px;

	&.medium
	{
		max-width: 300px;
	}

	&.center-horizontal
	{
		transform-origin: top center;
	}

	&.below-center
	{
		transform: translateX( -50% );
		transform-origin: 0% 0%;
	}

	&.above-left
	{
		transform-origin: 0% 100%;
	}

	&.above-center
	{
		transform: translateX( -50% );
		transform-origin: 0% 100%;
	}

	&.left
	{
		transform-origin: 100% 50%;
		transform: translate( 00% -50% );
	}

	&.right
	{
		transform-origin: 0 50%;
		transform: translate( 0% -50% );
	}

	&:intro
	{
		transform: scale( 0 );
		pointer-events: none;
		opacity: 0;
	}

	&:outro
	{
		opacity: 0;
		transition: all 0.1s ease-in;
		margin-top: 50px;
		pointer-events: none;
	}

	&.below-stretch
	{
		transform-origin: 0% 0%;

		&:intro
		{
			transform: scaleY( 0.1 );
		}
	}

	> .canvas
	{
		flex-direction: column;
	}

	.information
	{
		padding: 16px;
		font-size: 14px;
		opacity: 0.5;
	}

	button
	{
		padding: 2px 8px;
		cursor: pointer;
		font-family: Poppins;
		font-weight: 600;
		flex-shrink: 0;

		&:hover
		{
			background-color: #08f;
			color: #fff;
		}
	}
}

ColorAlphaControl
{
	gap: 0.5rem;
	flex-grow: 1;
	pointer-events: all;
	background: linear-gradient( to right, black, white );
	border-radius: 4px;
	padding: 2px;
	height: 12px;
	position: relative;
	cursor: pointer;
	border: 1px solid #333;

	&:hover
	{
		border: 1px solid #08f;
	}

	&:active
	{
		border: 1px solid #fff;
	}

	.handle
	{
		top: -5px;
		bottom: -5px;
		aspect-ratio: 1;
		border-radius: 100px;
		border: 2px solid #444;
		position: absolute;
		background-color: white;
		box-shadow: 2px 2px 16px #000a;
		transform: translateX( -50% );
		pointer-events: none;
	}
}

InputHint
{
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	align-items: center;
	justify-content: center;
}

@import "/UI/Theme.scss";

LocalDupeIcon
{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: $hud-radius-sm;
    border: 1px solid transparent;
    background-position: center;
    background-size: contain;
    cursor: pointer;

    &:hover
    {
        border-color: rgba($color-accent, 0.2);
    }

    .name
    {
        position: absolute;
        bottom: 0px;
        left: 0px;
        background-color: #0005;
        border-radius: 10px;
        padding: 0.5rem 1rem;
        margin: 0.5rem;
        font-family: $body-font;
        font-size: 1rem;
        font-weight: 600;
        max-width: 90%;
    }
}

@import "/UI/Popup.scss";

SpawnlistCreatePopup .inner
{
	width: 800px;
}

@import 'resource-picker.scss';

ClientInputControl
{
	@include resource-picker-base;

	&.no-binding
	{
		background-color: #0088ff0a;
		border-color: #0088ff22;

		&:hover
		{
			background-color: #0088ff22;
			border-color: #0088ff44;
		}
	}

	.preview
	{
		width: 2.5rem;
		height: 2.5rem;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;

		.hint
		{
			width: 100%;
			height: 100%;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center center;

			&.hidden { display: none; }
		}

		.fallback
		{
			font-size: 1.1rem;
			color: rgba( 255, 255, 255, 0.5 );

			&.hidden { display: none; }
		}
	}

	.bind-label
	{
		flex-grow: 1;
		font-size: 0.95rem;
		font-weight: 600;
		color: #fff;
	}
}

.slidercontrol
{
    flex-direction: row;
    min-width: 50px;
    position: relative;
    flex-shrink: 0;
    flex-direction: row;
    cursor: pointer;
    gap: 8px;
    flex-grow: 1;
    align-items: center;
    pointer-events: all;

    > .inner
    {
        flex-direction: column;
        flex-shrink: 1;
        flex-grow: 1;
        min-height: 32px;
        justify-content: center;

        > .values
        {
            width: 100%;
            pointer-events: none;
            font-size: 14px;
            color: #aaa;

            > .left
            {
                flex-grow: 1;
            }
        }

        > .track
        {
            position: relative;
            background-color: #888;
            height: 7px;
            margin: 8px;
            align-items: center;
            border-radius: 4px;

            > .track-active
            {
                background-color: #fff;
                position: absolute;
                height: 100%;
                left: 0px;
                border-radius: 4px;
            }

            > .thumb
            {
                position: relative;
                background-color: #fff;
                border-radius: 100px;
                width: 16px;
                height: 16px;
                transform: translateX( -50% );
            }
        }
    }

    > .entry
    {
        flex-shrink: 0;
        flex-grow: 0;
        width: 50px;

        > numberentry
        {
            background-color: transparent;

            > .content-label
            {
                padding: 0 4px;
            }
        }
    }
}


.slidercontrol .value-tooltip
{
    position: absolute;
    bottom: 150%;
    left: -8px;
    z-index: 1000;
    flex-direction: column;

    > .label
    {       
        background-color: black;
        padding: 8px 12px;
        border-radius: 8px;
    }

    >.tail
    {
        bottom: -0px;
        background-color: black;
        width: 10px;
        height: 10px;
        transform: rotateZ(45 deg) translateX( 4px );
        position: absolute;
    }
}

$primary: red !default;
$primary-alt: white !default;

$switch-padding: 6px !default;

.coloreditor
{
	flex-direction: column;
	min-width: 250px;
	max-width: 250px;

	> .canvas
	{
		border-top: 1px solid rgba( white, 0.5 );
		flex-grow: 1;
		flex-direction: column;
		padding: 10px 15px;


		> textentry.textentry
		{
			flex-grow: 0;
			flex-shrink: 0;
			width: auto;
		}
	}

	.slider
	{
		padding: 6.5px;
	}

	.slider .track
	{
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;
		transition: all 0.1s ease-out;

		.inner
		{
			display: none;
		}
	}

	.slider:hover, .slider:active
	{
		padding: 7px;

		.track
		{
			height: 20px;
			border-radius: 6px;
		}

		.thumb
		{
			width: 10px;
			height: 16px;
			margin-left: 2px;
		}
	}

	.slider .thumb
	{
		width: 10px;
		height: 10px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		backdrop-filter: invert( 1 );
		margin-left: 1px;
		pointer-events: none;
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}

	.hue .track
	{
		background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);

		.inner
		{
			display: none;
		}
	}

	.satval
	{
		background: linear-gradient(to right, white, transparent);
		height: 200px;
		position: relative;

		&:active
		{
			z-index: 10;
			cursor: none;
		}

		.value_gradient
		{
			background: linear-gradient(to bottom, black, white);
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			pointer-events: none;
			mix-blend-mode: multiply;
		}

		.thumb
		{
			z-index: 10;
		}
	}

	.presets
	{
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		padding: 15px;
		border-top: 1px solid rgba( white, 0.5 );

		.preset
		{
			background-color: white;
			width: 16px;
			height: 16px;
			margin: 2px;
			border-radius: 20px;
			cursor: pointer;
			
			&:hover
			{
				box-shadow: 0px 0px 1px 2px white;
			}
		}
	}
}


.coloreditorrgba
{
	flex-direction: column;

	.slider
	{
		padding-right: 16px;
	}

	.slider .track
	{
		background-color: transparent;
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;

		.inner
		{
			display: none;
		}
	}

	.slider .thumb
	{
		width: 12px;
		height: 12px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		margin-left: 2px;
		backdrop-filter: invert( 1 );
	}

	.red_slider .track
	{
		background-image: linear-gradient( to right, rgba( #e63439, 0.1 ), rgba( #e63439, 0.9 ) );
	}

	.green_slider .track
	{
		background-image: linear-gradient( to right, rgba( #54be35, 0.1 ), rgba( #54be35, 0.9 ) );
	}

	.blue_slider .track
	{
		background-image: linear-gradient( to right, rgba( #3472e6, 0.1 ), rgba( #3472e6, 0.9 ) );
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}
}


.coloreditorhsva
{
	flex-direction: column;

	.slider
	{
		padding-right: 16px;
	}

	.slider .track
	{
		background-color: transparent;
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;

		.inner
		{
			display: none;
		}
	}

	.slider .thumb
	{
		width: 12px;
		height: 12px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		margin-left: 2px;
		backdrop-filter: invert( 1 );
	}
		
	.hue_slider .track
	{
		background-image: linear-gradient( to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00 );
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}
}

MapChooser {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: all;
    background: linear-gradient( 140deg, #0f141a 0%, #0a0e14 60%, #111926 100% );
    justify-content: flex-start;
    align-items: stretch;
    font-weight: bold;
    font-family: Poppins;
    color: white;
    flex-direction: column;
    padding: 48px 60px;
    gap: 24px;

    .header {
        flex-direction: column;
        gap: 6px;

        h1 {
            font-size: 48px;
            letter-spacing: 1px;
        }

        .subtitle {
            font-size: 16px;
            opacity: 0.65;
        }
    }

    .content {
        flex-grow: 1;
        flex-direction: row;
        gap: 24px;
    }

    .map-list {
        flex-direction: column;
        flex-grow: 1;
        min-width: 0;

        .map-entries {
            flex-direction: column;
            gap: 10px;
            padding: 12px;
            border-radius: 16px;
            background: #0a0c10cc;
            border: 1px solid #ffffff14;
            overflow-y: scroll;
        }

        button {
            padding: 12px 14px;
            border-radius: 12px;
            background: #ffffff0f;
            text-align: left;
            transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
            gap: 4px;
            cursor: pointer;
            flex-direction: row;
            align-items: center;
        }

            button:hover {
                transform: translateY( -1px );
                box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.35 );
            }

            button.active {
                background: #db3984;
                box-shadow: 0 6px 18px rgba( 219, 57, 132, 0.35 );
            }

        .title {
            font-size: 18px;
        }

        .thumb {
            width: 84px;
            height: 48px;
            border-radius: 10px;
            background-color: #0b0f15;
            background-position: center;
            background-size: cover;
            flex-shrink: 0;
            box-shadow: inset 0 0 0 1px #ffffff12;
        }

        .text {
            flex-direction: column;
            gap: 2px;
        }

        .ident {
            font-size: 12px;
            opacity: 0.6;
        }
    }

    .settings {
        width: 360px;
        padding: 16px;
        border-radius: 16px;
        background: #0a0c10cc;
        border: 1px solid #ffffff14;
        flex-direction: column;
        gap: 14px;
    }

    .section-title {
        font-size: 18px;
        text-transform: uppercase;
        letter-spacing: 1px;
        opacity: 0.85;
    }

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

        label {
            font-size: 14px;
            opacity: 0.7;
        }

        textentry {
            width: 100%;
            padding: 8px 10px;
            background: #ffffff0f;
            border-radius: 8px;
        }
    }

        .field.split {
            flex-direction: row;
            gap: 12px;

            .field {
                flex-grow: 1;
            }
        }

    .privacy {
        flex-direction: row;
        gap: 8px;

        button {
            flex-grow: 1;
            padding: 8px 10px;
            border-radius: 8px;
            background: #ffffff0f;
            opacity: 0.7;
            cursor: pointer;
            transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, background 0.12s ease;
        }

            button:hover {
                opacity: 0.9;
                transform: translateY( -1px );
            }

            button.active {
                background: #db3984;
                opacity: 1;
                box-shadow: 0 6px 16px rgba( 219, 57, 132, 0.35 );
                transform: translateY( -1px );
            }
    }

    .selected-map {
        padding: 10px 12px;
        border-radius: 10px;
        background: #ffffff0a;
        flex-direction: column;
        gap: 4px;

        .label {
            font-size: 12px;
            opacity: 0.6;
        }
    }

    .launch {
        margin-top: 4px;
        padding: 12px;
        border-radius: 10px;
        background: #47c27c;
        color: #0b0f12;
        font-size: 18px;
    }

        .launch.disabled {
            opacity: 0.4;
            background: #ffffff1f;
            color: white;
        }
}

@import "/styles/_theme.scss";
$background-size: 8px;

PackageCard
{
	flex-shrink: 0;

	&:hover
	{
		sound-in: "ui.button.over";
	}

	&:active
	{
		sound-in: "ui.button.press";
	}

	flex-direction: column;
	position: relative;
	background-color: rgba( $default-950, 0 );
	border-radius: $rounding-default;
	transition: all 150ms ease;
	cursor: pointer;
	z-index: 0;
	height: 200px;

	.image
	{
		flex-grow: 1;
		flex-shrink: 0;
		transition: all 150ms ease;
		border: 1px solid rgba( white, 0.025 );
		aspect-ratio: 16 / 9;
		background-position: center;
		background-size: cover;
		border-radius: $rounding-small;
		position: relative;
	}

	column
	{
		padding: 8px 2px; // Optically aligned
	}

	&.list
	{
		flex-grow: 1;
		height: 64px;
		flex-direction: row;
		gap: 12px;
		padding: 4px;

		.inner column
		{
			flex-grow: 1;
		}

		.image
		{
			height: 100%;
			aspect-ratio: 1;
			flex-grow: 0;
			flex-shrink: 0;
		}

		column
		{
			gap: 3px;
			justify-content: center;
		}

		.package-title
		{
			flex-shrink: 0;
			max-width: 500px;
		}

		.package-users
		{
			top: 1px;
			right: 1px;
		}

		&:hover
		{
			background-color: $default-800;
			transform: none;

			&::after
			{
				display: none;
			}
		}
	}

	&.wide
	{
		height: 250px;

		.package-title
		{
			max-width: 300px;
		}
	}

	&.small
	{
		height: 200px;
		aspect-ratio: 3/4;

		.image
		{
			aspect-ratio: 1;
		}

		.package-title
		{
			max-width: 140px;
		}
	}

	&.tall
	{
		height: 400px;

		.image
		{
			aspect-ratio: 9/16;
		}

		.package-title
		{
			max-width: 200px;
		}
	}

	.package-title
	{
		text-overflow: ellipsis;
		max-height: 24px;
		flex-shrink: 1;
		font-size: 14px;
	}

	.package-users
	{
		position: absolute;
		bottom: 4px;
		right: 4px;
		background-color: rgba( 10, 40, 10, 0.95 );
		padding: 3px 5px;
		border-radius: 2px;
		justify-content: center;
		align-items: center;
		gap: 3px;
		font-size: 11px;
		color: #def;
		border: 1px solid #252;
		color: #2f3;

		&:before
		{
			content: '●';
			font-size: 0.5rem;
		}
	}
	// Hover effect (not for list)
	&:not(.list)
	{
		&::after
		{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: rgba( $default-950, 0 );
			transition: all 150ms ease;
			z-index: -10;
			border-radius: $rounding-large;
			pointer-events: none;
		}

		&:hover
		{
			transform: scale( 1.05 );

			&::after
			{
				background-color: $default-800;
				top: -$background-size;
				left: -$background-size;
				right: -$background-size;
				bottom: -$background-size;
				box-shadow: 0 0 25px rgba( black, 0.3 );
			}

			z-index: 100;
			background-color: $default-900;
		}
	}
}

$primary: red !default;
$primary-alt: white !default;

$switch-padding: 6px !default;

.coloreditor
{
	flex-direction: column;
	min-width: 250px;
	max-width: 250px;

	> .canvas
	{
		border-top: 1px solid rgba( white, 0.5 );
		flex-grow: 1;
		flex-direction: column;
		padding: 10px 15px;


		> textentry.textentry
		{
			flex-grow: 0;
			flex-shrink: 0;
			width: auto;
		}
	}

	.slider
	{
		padding: 6.5px;
	}

	.slider .track
	{
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;
		transition: all 0.1s ease-out;

		.inner
		{
			display: none;
		}
	}

	.slider:hover, .slider:active
	{
		padding: 7px;

		.track
		{
			height: 20px;
			border-radius: 6px;
		}

		.thumb
		{
			width: 10px;
			height: 16px;
			margin-left: 2px;
		}
	}

	.slider .thumb
	{
		width: 10px;
		height: 10px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		backdrop-filter: invert( 1 );
		margin-left: 1px;
		pointer-events: none;
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}

	.hue .track
	{
		background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);

		.inner
		{
			display: none;
		}
	}

	.satval
	{
		background: linear-gradient(to right, white, transparent);
		height: 200px;
		position: relative;

		&:active
		{
			z-index: 10;
			cursor: none;
		}

		.value_gradient
		{
			background: linear-gradient(to bottom, black, white);
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			pointer-events: none;
			mix-blend-mode: multiply;
		}

		.thumb
		{
			z-index: 10;
		}
	}

	.presets
	{
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		padding: 15px;
		border-top: 1px solid rgba( white, 0.5 );

		.preset
		{
			background-color: white;
			width: 16px;
			height: 16px;
			margin: 2px;
			border-radius: 20px;
			cursor: pointer;
			
			&:hover
			{
				box-shadow: 0px 0px 1px 2px white;
			}
		}
	}
}


.coloreditorrgba
{
	flex-direction: column;

	.slider
	{
		padding-right: 16px;
	}

	.slider .track
	{
		background-color: transparent;
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;

		.inner
		{
			display: none;
		}
	}

	.slider .thumb
	{
		width: 12px;
		height: 12px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		margin-left: 2px;
		backdrop-filter: invert( 1 );
	}

	.red_slider .track
	{
		background-image: linear-gradient( to right, rgba( #e63439, 0.1 ), rgba( #e63439, 0.9 ) );
	}

	.green_slider .track
	{
		background-image: linear-gradient( to right, rgba( #54be35, 0.1 ), rgba( #54be35, 0.9 ) );
	}

	.blue_slider .track
	{
		background-image: linear-gradient( to right, rgba( #3472e6, 0.1 ), rgba( #3472e6, 0.9 ) );
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}
}


.coloreditorhsva
{
	flex-direction: column;

	.slider
	{
		padding-right: 16px;
	}

	.slider .track
	{
		background-color: transparent;
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;

		.inner
		{
			display: none;
		}
	}

	.slider .thumb
	{
		width: 12px;
		height: 12px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		margin-left: 2px;
		backdrop-filter: invert( 1 );
	}
		
	.hue_slider .track
	{
		background-image: linear-gradient( to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00 );
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}
}

.dropdown
{
	gap: 2px;
	flex-grow: 1;
	cursor: pointer;
	justify-content: flex-end;
	align-items: center;
	padding: 0px 12px;

	.button-right-column
	{
		flex-grow: 1;
	}
}

$dragMode: #e67e22;

OffsetEditor {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 1;
	pointer-events: all;

	.canvas {
		position: absolute;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center;
		pointer-events: none;

		& > .dot {
			background-color: red;
			margin: 2px 0 0 2px;
			width: 2px;
			height: 2px;
			box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.4);
		}
	}

	.hint {
		position: absolute;
		flex-direction: column;
		top: 25%;
		right: 50%;
		transform: translate(50%,-50%);
		font-family: Poppins;
		text-shadow: 0px 1px 1px rgba(0,0,0,0.5);

		text {
			&.highlight {
				color: $dragMode;
			}
		}

		.title {
			font-size: 34px;
			color: white;
		}

		.subTitle {
			font-size: 24px;
			text-align: center;
			color: $dragMode;

			label {
				width: 100%;
			}
		}
	}

	.menu {
		position: absolute;
		flex-direction: column;
		width: 400px;
		height: 800px;
		background-color: rgb(31, 31, 31);
		top: 10px;
		left: 10px;
		font-family: Poppins;
		border-radius: 4px;
		color: white;

		.title {
			font-size: 50px;
			height: 75px;
			text-align: center;
			margin-bottom: 10px;
		}

		.subTitle {
			font-size: 20px;
			margin: 20px 0 10px 0;
			width: 100%;
			text-align: center;
		}

		button {
			cursor: pointer;
			color: white;
			text-align: center;
			width: 120px;
			margin: 0 25px 0 25px;
			border: 2px;
			height: 30px;
			border-color: transparent;
			border-width: 1px;
			border-radius: 4px;
			align-items: center;

			& > label {
				width: 100%;
				font-size: 18px;
				font-weight: bold;

				&:active {
					font-size: 20px;
				}
			}

			&:hover {
				border-color: white;
			}

			&:active {
				border-color: transparent;
			}
		}

		.dataButtons {
			justify-content: center;
			align-items: center;
			margin-top: 0px;
			height: 20px;
			flex-wrap: wrap;

			button {
				margin: 8px;
				width: 180px;

				&.large {
					width: 240px;
				}

				label {
					font-size: 16px;

					&:active {
						font-size: 20px;
					}
				}
			}
		}

		.buttonContainer {
			justify-content: center;
			align-items: center;
			margin-top: 80px;
			height: 60px;
		}
	}
}

// ── Theme ─────────────────────────────────────────────────────────────────────
// Re-theming the panel is a one-stop edit: override these variables. The palette is
// a dark-green-on-black neon look; nothing below hardcodes a colour outside this block.
$bg:        #030d07;                 // panel background (deep green-black)
$btn:       #010603;                 // buttons / cells — deeper than the panel
$btn-hover: #07190e;                 // button / cell hover
$border:    rgba(47,148,80,0.6);     // hover border (muted green)
$filled:    #185c2c;                 // filled ticks / selected volume cells
$accent:    #2f9450;                 // on / ok accent (muted green)
$accent-bg: rgba(47,148,80,0.2);     // accent toggle background
$text:      rgba(200,236,210,0.9);   // primary text (green-tinted)
$text-dim:  rgba(180,224,194,0.42);  // labels
// ────────────────────────────────────────────────────────────────────────────────

skafinitymusicpanel {
	// Fill the ScreenPanel; flex-centre the board. pointer-events:none so a closed panel
	// never blocks anything — only the board / button itself take pointer events.
	position: absolute; top: 0; left: 0; right: 0; bottom: 0;
	justify-content: center; align-items: center;
	pointer-events: none;
	font-family: Consolas, 'Roboto Mono', monospace;

	// Floating toggle button (shown when the board is closed), bottom-left.
	.fab {
		position: absolute; left: 24px; bottom: 24px;
		width: 52px; height: 52px;
		justify-content: center; align-items: center;
		font-size: 28px; color: $text;
		background-color: $btn;
		border: 2px solid rgba(255,255,255,0.12); border-radius: 2px;
		cursor: pointer; pointer-events: all;

		&:hover { background-color: $btn-hover; border-color: $border; }
	}

	// The board — sized to its content (no scroll range to drag-pan). Keep it lean enough
	// to fit a 1080-tall reference; it extends past the box rather than scrolling.
	.music {
		flex-shrink: 0;
		width: 96%; max-width: 1320px;
		flex-direction: column;
		align-items: stretch;
		padding: 14px 32px;
		background-color: $bg;
		border: 1.5px solid rgba(255,255,255,0.12);
		border-radius: 4px;
		gap: 6px;
		pointer-events: all;
	}

	.music > div { flex-shrink: 0; }

	.header { flex-direction: row; align-items: center; justify-content: space-between; }

	.title {
		justify-content: center; white-space: nowrap;
		font-size: 26px; font-weight: bold; letter-spacing: 6px; color: white;
	}

	.close {
		width: 34px; height: 34px; justify-content: center; align-items: center;
		font-size: 20px; font-weight: bold; color: rgba(255,255,255,0.6);
		background-color: rgba(255,255,255,0.08); border-radius: 2px;
		cursor: pointer; pointer-events: all;

		&:hover { color: #ffffff; background-color: rgba(255,255,255,0.2); }
	}

	.divider { height: 2px; background-color: rgba(255,255,255,0.1); margin: 0; }

	.top { flex-direction: row; flex-wrap: wrap; gap: 6px 32px; }
	.top > .row { width: 46%; }

	.row { flex-direction: column; gap: 3px; }
	.genre-row .cells { gap: 6px; }

	.label {
		font-size: 14px; letter-spacing: 2px;
		color: $text-dim; white-space: nowrap;
	}

	.play-row { flex-direction: row; align-items: center; gap: 8px; }

	.seed-box, .num {
		justify-content: center; align-items: center; height: 32px; padding: 0 14px;
		font-size: 15px; letter-spacing: 1px; color: white;
		background-color: rgba(255,255,255,0.07); border-radius: 2px;
	}
	.num { min-width: 60px; font-weight: bold; }

	.tag-input {
		width: 360px; height: 32px; padding: 0 12px; font-size: 15px; color: white;
		background-color: rgba(255,255,255,0.07);
		border: 2px solid rgba(255,255,255,0.15); border-radius: 2px; pointer-events: all;
	}

	.cells { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px; }

	.btn {
		justify-content: center; align-items: center; height: 32px; padding: 0 16px;
		font-size: 14px; color: $text;
		background-color: $btn;
		border: 2px solid transparent; border-radius: 2px; cursor: pointer; pointer-events: all;

		&.wide { min-width: 96px; }
		&.reroll { height: 28px; padding: 0 12px; font-size: 13px; margin-left: 12px; }
		&:hover { background-color: $btn-hover; border: 2px solid $border; }
		&.toggle.on { background-color: $accent-bg; border: 2px solid rgba(47,148,80,0.7); color: #cdebd6; }
	}

	.cell {
		justify-content: center; align-items: center; height: 19px;
		font-size: 13px; color: rgba(255,255,255,0.8);
		background-color: $btn;
		border: 2px solid transparent; border-radius: 2px; cursor: pointer; pointer-events: all;

		&:hover { background-color: $btn-hover; border: 2px solid $border; }
		&.choice { padding: 0 10px; height: 28px; }
		&.tick { width: 11px; }
		&.tick.filled { background-color: $filled; }
		&.filled { background-color: $filled; }
		&.selected { border: 2px solid rgba(255,255,255,0.85); }
	}

	// GLOBAL knobs: four compact columns.
	.vibe-grid { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
	.vibe { width: 22%; flex-direction: column; gap: 2px; }
	.vibe-head { flex-direction: row; justify-content: flex-start; align-items: center; gap: 6px; }
	.vibe-name { font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,0.55); white-space: nowrap; }
	.vibe-val { font-size: 12px; color: white; white-space: nowrap; }

	// instrument mixer matrix: rows = voices, Volume leftmost
	.matrix { flex-direction: column; gap: 3px; }
	.mrow { flex-direction: row; align-items: flex-start; gap: 12px; }
	.mvoice { width: 76px; flex-shrink: 0; align-items: flex-start; justify-content: flex-start;
		font-size: 13px; font-weight: bold; letter-spacing: 1px; color: white; }
	.mhead .mlabel { font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,0.4); }
	.mcell { width: 0; flex-grow: 1; flex-direction: column; gap: 3px; }

	.hint { font-size: 14px; letter-spacing: 1px; color: rgba(255,255,255,0.4); white-space: nowrap; }
	.hint.ok { color: $accent; }
}

menupanel
{
    position: absolute;
    z-index: 1000;
    pointer-events: all;
    font-size: 12px;
    flex-shrink: 0;

    .background
    {
        position: absolute;
        left: -5000px;
        right: -5000px;
        top: -5000px;
        bottom: -5000px;
    }

    > .inner
    {
        min-width: 200px;
        min-height: 20px;
        flex-direction: column;
        font-family: Poppins;
        font-weight: bold;
        border-radius: 10px;
        box-shadow: 5px 5px 30px #000e;
        background-color: #2a2a2a;
        flex-shrink: 0;

        .spacer
        {
            height: 1px;
            background-color: #0005;
        }

        .option
        {
            color: #fffa;
            padding: 0px 8px;
            cursor: pointer;
            flex-shrink: 0;
            height: 32px;

            &:first-child
            {
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }

            &:last-child
            {
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }

            .icon
            {
                padding: 8px;
                font-family: Material Icons;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
            }

            .text
            {
                padding: 8px;
                flex-shrink: 0;
            }

            &:hover
            {
                background-color: #3472e6;
                color: #f5f8fe;
            }
        }
    }
}

ControlSheet
{
	flex-direction: column;
	font-family: Poppins;
	font-size: 14px;
}

ControlSheet > .body
{
	flex-direction: column;
	flex-grow: 1;
	overflow: scroll;
	gap: 1px;
}

ControlSheet > .body > * 
{
	flex-shrink: 0;
}

PackageFlairBar
{
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	flex-direction: row;
	gap: 5px;
	pointer-events: none;

	.flair
	{
		position: relative;
		align-items: center;
		justify-content: center;
		width: 22px;
		height: 22px;
		pointer-events: all;
		border-radius: 4px;
		color: white;
		border: 1px solid rgba( white, 0.1 );
		outline: 1px solid #0006;
		opacity: 0.7;

		&:hover
		{
			opacity: 1;
		}

		icon
		{
			font-size: 15px;
		}
	}
}

@import "theme";

.customize-page
{
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: $deadzone-y $deadzone-x;
}

.eyebrow
{
	font-family: $display-font;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 4px;
	color: $accent-red;
}

.page-title
{
	font-family: $header-font;
	font-size: 44px;
	font-weight: 800;
	color: $text-bright;
	margin-bottom: 8px;
}

.card-stage
{
	flex-direction: row;
	align-items: center;
	gap: 16px;
}

// Car switch: the card is remounted (@key) each change, so the animation replays.
// Direction class picks the side it slides in from; the overshoot mid-keyframe gives
// it a springy pop.
@keyframes car-swap-right
{
	0%   { opacity: 0; transform: translateX( 90px ) scale( 0.9 ) rotate( 2.5deg ); }
	65%  { opacity: 1; transform: translateX( -14px ) scale( 1.015 ) rotate( -0.6deg ); }
	100% { opacity: 1; transform: translateX( 0px ) scale( 1 ) rotate( 0deg ); }
}

@keyframes car-swap-left
{
	0%   { opacity: 0; transform: translateX( -90px ) scale( 0.9 ) rotate( -2.5deg ); }
	65%  { opacity: 1; transform: translateX( 14px ) scale( 1.015 ) rotate( 0.6deg ); }
	100% { opacity: 1; transform: translateX( 0px ) scale( 1 ) rotate( 0deg ); }
}

.car-card
{
	flex-direction: row;
	align-items: center;
	gap: 28px;
	width: 900px;
	padding: 28px;
	border-radius: 24px;
	background-color: $surface-deep;
	border: 2px solid $surface-light;
	box-shadow:
		0px 8px 0px rgba( 0, 0, 0, 0.06 ),
		0px 24px 48px $shadow-soft;

	&.from-right { animation: car-swap-right 0.34s ease-out; }
	&.from-left  { animation: car-swap-left 0.34s ease-out; }

	position: relative;
}

// Badge marking the locked-in car on the big card.
.picked-badge
{
	position: absolute;
	top: -14px;
	left: -14px;
	z-index: 20;
	padding: 7px 16px;
	border-radius: 16px;
	background-color: $accent-green;
	font-family: $display-font;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2px;
	color: white;
	box-shadow: 0px 3px 0px rgba( 0, 0, 0, 0.18 );
	transform: rotate( -4deg );
}

.car-photo
{
	width: 420px;
	height: 300px;
	flex-shrink: 0;
	border-radius: 18px;
	background-color: $bg-cream;
	align-items: center;
	justify-content: center;
	position: relative;
}

.car-photo-img
{
	width: 100%;
	height: 100%;
	border-radius: 18px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.photo-empty
{
	position: absolute;
	font-family: $header-font;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 2px;
	color: rgba( 42, 31, 48, 0.25 );
}

.car-info
{
	flex-direction: column;
	flex-grow: 1;
	gap: 4px;
}

.car-name
{
	font-family: $header-font;
	font-size: 48px;
	font-weight: 800;
	color: $text-default;
}

.car-desc
{
	font-family: $display-font;
	font-size: 16px;
	color: $text-muted;
	margin-bottom: 16px;
}

.stat-grid
{
	flex-direction: column;
	gap: 12px;
}

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

.stat-head
{
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.stat-label
{
	font-family: $display-font;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2px;
	color: $text-muted;
}

.stat-num
{
	font-family: $header-font;
	font-size: 15px;
	font-weight: 800;
	color: $text-default;
}

.stat-bar
{
	flex-direction: row;
	gap: 6px;
}

.seg
{
	width: 44px;
	height: 12px;
	border-radius: 6px;
	background-color: $surface-light;

	&.on.stat-red { background-color: $accent-red; }
	&.on.stat-yellow { background-color: $accent-yellow; }
	&.on.stat-blue { background-color: $accent-blue; }
	&.on.stat-green { background-color: $accent-green; }
}

.cycle
{
	height: 56px;
	border-radius: 28px;
	background-color: $surface-deep;
	border: 2px solid rgba( 0, 0, 0, 0.08 );
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 16px;
	cursor: pointer;
	box-shadow:
		0px 4px 0px rgba( 0, 0, 0, 0.1 ),
		0px 10px 20px $shadow-soft;
	transition: transform 0.12s ease-out;

	&:hover { transform: translateY( -2px ); }
	&:active { transform: translateY( 2px ); }

	.chevron
	{
		font-family: $display-font;
		font-size: 30px;
		font-weight: 800;
		color: $text-default;
		padding-bottom: 4px;
	}

	InputHint
	{
		width: 24px;
		height: 24px;
	}
}

.thumb-strip
{
	flex-direction: row;
	gap: 14px;
	margin-top: 12px;
}

.thumb
{
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 70px;
	border-radius: 16px;
	background-color: $surface-mid;
	border: 3px solid rgba( 0, 0, 0, 0 );
	cursor: pointer;
	transition: transform 0.12s ease-out;

	&:hover { transform: translateY( -2px ); }

	// The car you're currently previewing.
	&.active
	{
		border-color: $text-default;
		background-color: $surface-deep;
	}

	// The car that's locked in - green to match the card badge.
	&.picked
	{
		border-color: $accent-green;
	}

	.thumb-name
	{
		font-family: $display-font;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 1px;
		color: $text-default;
	}
}

.thumb-check
{
	position: absolute;
	top: -8px;
	right: -8px;
	width: 24px;
	height: 24px;
	border-radius: 12px;
	background-color: $accent-green;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	color: white;
	box-shadow: 0px 2px 0px rgba( 0, 0, 0, 0.15 );
}

.footer-row
{
	flex-direction: row;
	align-items: center;
	gap: 18px;
	margin-top: 14px;
}

.back-btn
{
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 14px 22px 14px 18px;
	border-radius: 28px;
	background-color: $surface-mid;
	border: 2px solid rgba( 0, 0, 0, 0.1 );
	cursor: pointer;
	box-shadow: 0px 3px 0px $shadow-chunky;
	transition: transform 0.12s ease-out;

	&:hover { transform: translateY( -2px ); }
	&:active { transform: translateY( 2px ); }

	.back-glyph
	{
		width: 24px;
		height: 24px;
	}

	.back-label
	{
		font-family: $display-font;
		font-size: 14px;
		font-weight: 800;
		letter-spacing: 2px;
		color: $text-default;
	}
}

.lock-btn
{
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: 28px;
	background-color: $accent-red;
	cursor: pointer;
	box-shadow: 0px 4px 0px rgba( 0, 0, 0, 0.18 );
	transition: transform 0.12s ease-out;

	&:hover { transform: translateY( -2px ); }
	&:active { transform: translateY( 2px ); }

	.lock-label
	{
		font-family: $header-font;
		font-size: 18px;
		font-weight: 800;
		letter-spacing: 1px;
		color: white;
	}

	.lock-glyph
	{
		width: 24px;
		height: 24px;
	}
}

// Already the active car: fade the button out and stop it reacting.
.lock-btn.is-active
{
	opacity: 0.4;
	box-shadow: none;
	transform: none;
}

// Interactive elements ignore the mouse by default (controller behaviour); mouse
// mode turns pointer events on, which is what gives us a cursor + hover + click.

.cycle,
.thumb,
.back-btn,
.lock-btn
{
	pointer-events: none;
}

.customize-page.mouse .cycle,
.customize-page.mouse .thumb,
.customize-page.mouse .back-btn,
.customize-page.mouse .lock-btn
{
	pointer-events: all;
}

// Faded lock button is inert.
.customize-page.mouse .lock-btn.is-active
{
	pointer-events: none;
}

.customize-page.mouse .cycle:hover
{
	background-color: $accent-red;
	sound-in: element_switch;

	.chevron { color: white; }
}

@import "theme";

.leaderboard-page
{
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	padding: $deadzone-y $deadzone-x;
	padding-top: 128px;
}

.eyebrow
{
	font-family: $display-font;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 4px;
	color: $accent-red;
}

.page-title
{
	font-family: $header-font;
	font-size: 44px;
	font-weight: 800;
	color: $text-bright;
	margin-bottom: 8px;
}

.filter-row
{
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 100%;
	max-width: 560px;
	cursor: pointer;

	.filter-label
	{
		font-family: $display-font;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: $hud-text-muted;
	}
}

.checkbox
{
	width: 26px;
	height: 26px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background-color: $surface-mid;
	border: 2px solid rgba( 0, 0, 0, 0.1 );
	box-shadow: 0px 2px 0px $shadow-chunky;
	transition: transform 0.12s ease-out;

	&:hover { transform: translateY( -1px ); }
	&:active { transform: translateY( 1px ); }

	&.checked
	{
		background-color: $accent-green;
	}

	.check-glyph
	{
		font-size: 15px;
		font-weight: 800;
		color: white;
	}
}

.board
{
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	width: 100%;
	max-width: 560px;
	max-height: 460px;
	overflow-y: scroll;
}

.board-msg
{
	font-family: $display-font;
	font-size: 16px;
	font-weight: 700;
	color: $hud-text-muted;
	align-items: center;
	justify-content: center;
	padding: 40px 0;
}

// Smoked-glass standings pills; the local player's row flips to a solid white pill.
.row
{
	flex-direction: row;
	align-items: center;
	height: 44px;
	gap: 10px;

	.row-pos
	{
		min-width: 36px;
		justify-content: flex-end;
		font-family: $display-font;
		font-size: 21px;
		font-weight: 900;
		color: $text-bright;
		text-shadow: $hud-shadow;
	}

	.row-pill
	{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-grow: 1;
		height: 100%;
		padding: 0 18px;
		background-color: $pill-dark;
		border-radius: $pill-radius;
		backdrop-filter: blur( 4px );

		.row-name
		{
			font-family: $header-font;
			font-size: 16px;
			font-weight: 700;
			color: $text-bright;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			max-width: 320px;
		}

		.row-time
		{
			font-family: $display-font;
			font-size: 16px;
			font-weight: 800;
			color: $text-bright;
		}
	}

	&:not(.local)
	{
		opacity: 0.8;
	}

	&.local .row-pill
	{
		background-color: $surface-deep;
		box-shadow: 0px 4px 12px $shadow-chunky;

		.row-name,
		.row-time
		{
			color: $text-default;
		}
	}
}

.footer-row
{
	flex-direction: row;
	align-items: center;
	gap: 18px;
	margin-top: 14px;
}

.back-btn
{
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 14px 22px 14px 18px;
	border-radius: 28px;
	background-color: $surface-mid;
	border: 2px solid rgba( 0, 0, 0, 0.1 );
	cursor: pointer;
	box-shadow: 0px 3px 0px $shadow-chunky;
	transition: transform 0.12s ease-out;

	&:hover { transform: translateY( -2px ); }
	&:active { transform: translateY( 2px ); }

	.back-glyph
	{
		width: 24px;
		height: 24px;
	}

	.back-label
	{
		font-family: $display-font;
		font-size: 14px;
		font-weight: 800;
		letter-spacing: 2px;
		color: $text-default;
	}
}

.back-btn,
.filter-row
{
	pointer-events: none;
}

.leaderboard-page.mouse .back-btn,
.leaderboard-page.mouse .filter-row
{
	pointer-events: all;
}

$primary: red !default;
$primary-alt: white !default;

$switch-padding: 6px !default;

.checkbox.switch
{
	cursor: pointer;

	> .checkmark
	{
		font-size: 22px;
		border: 0px solid $primary;
		border-radius: 100px;
		text-align: center;
		justify-content: center;
		align-items: center;
		color: $primary-alt;
		padding: $switch-padding;
		padding-right: 32px;
		padding-left: $switch-padding;
		transition: all 0.3s ease;
		background-color: rgba( $primary, 0.1 );

		> .handle
		{
			background-color: $primary-alt;
			width: 20px;
			height: 20px;
			border-radius: 100px;
			box-shadow: 2px 2px 12px black;
		}
	}

	&.checked
	{
		> .checkmark
		{
			background-color: $primary;
			padding-left: 32px;
			padding-right: $switch-padding;
		}
	}

	&:active
	{
		transform: scale( 0.9 );
		transform-origin: 20px 50%;
	}
}

.slidercontrol
{
    flex-direction: row;
    min-width: 50px;
    position: relative;
    flex-shrink: 0;
    flex-direction: row;
    cursor: pointer;
    gap: 8px;
    flex-grow: 1;
    align-items: center;
    pointer-events: all;

    > .inner
    {
        flex-direction: column;
        flex-shrink: 1;
        flex-grow: 1;
        min-height: 32px;
        justify-content: center;

        > .values
        {
            width: 100%;
            pointer-events: none;
            font-size: 14px;
            color: #aaa;

            > .left
            {
                flex-grow: 1;
            }
        }

        > .track
        {
            position: relative;
            background-color: #888;
            height: 7px;
            margin: 8px;
            align-items: center;
            border-radius: 4px;

            > .track-active
            {
                background-color: #fff;
                position: absolute;
                height: 100%;
                left: 0px;
                border-radius: 4px;
            }

            > .thumb
            {
                position: relative;
                background-color: #fff;
                border-radius: 100px;
                width: 16px;
                height: 16px;
                transform: translateX( -50% );
            }
        }
    }

    > .entry
    {
        flex-shrink: 0;
        flex-grow: 0;
        width: 50px;

        > numberentry
        {
            background-color: transparent;

            > .content-label
            {
                padding: 0 4px;
            }
        }
    }
}


.slidercontrol .value-tooltip
{
    position: absolute;
    bottom: 150%;
    left: -8px;
    z-index: 1000;
    flex-direction: column;

    > .label
    {       
        background-color: black;
        padding: 8px 12px;
        border-radius: 8px;
    }

    >.tail
    {
        bottom: -0px;
        background-color: black;
        width: 10px;
        height: 10px;
        transform: rotateZ(45 deg) translateX( 4px );
        position: absolute;
    }
}

.switchcontrol
{
    flex-direction: row;
    width: 100px;
    min-height: 24px;
    align-items: center;
    cursor: pointer;

    .switch-frame
    {
        flex-grow: 0;
        flex-shrink: 1;
        width: 48px;
        height: 16px;
        background-color: #fff1;
        margin: 0px 5px;
        align-items: center;
        border-radius: 100px;
        transition: all 0.4s linear;

        .switch-inner
        {
            position: relative;
            flex-grow: 0;
            flex-shrink: 1;
            background-color: #999;
            width: 25px;
            height: 25px;
            border-radius: 100px;
            left: 20%;
            transform: translateX( -50% );
            transition: all 0.3s ease-out;
        }
    }

    &.active
    {
        .switch-frame
        {
            background-color: #fffa;
        }

        .switch-inner
        {
            left: 80%;
            background-color: #fff;
        }
    }
}

$primary: red !default;
$primary-alt: white !default;

$switch-padding: 6px !default;

.button.popupbutton.dropdown
{
	cursor: pointer;
	transition: all .1s ease-out;
	position: relative;

	> .dropdown_indicator
	{
		position: absolute;
		right: 8px;
	}

	&.open
	{
		border-bottom-left-radius: 1px;
		border-bottom-right-radius: 1px;
		transition: border-radius 0.2s ease-out;
	}
}

select
{
	min-height: 40px;

	> option
	{
		display: none;
	}
}

$primary: red !default;
$primary-alt: white !default;

$switch-padding: 6px !default;

.coloreditor
{
	flex-direction: column;
	min-width: 250px;
	max-width: 250px;

	> .canvas
	{
		border-top: 1px solid rgba( white, 0.5 );
		flex-grow: 1;
		flex-direction: column;
		padding: 10px 15px;


		> textentry.textentry
		{
			flex-grow: 0;
			flex-shrink: 0;
			width: auto;
		}
	}

	.slider
	{
		padding: 6.5px;
	}

	.slider .track
	{
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;
		transition: all 0.1s ease-out;

		.inner
		{
			display: none;
		}
	}

	.slider:hover, .slider:active
	{
		padding: 7px;

		.track
		{
			height: 20px;
			border-radius: 6px;
		}

		.thumb
		{
			width: 10px;
			height: 16px;
			margin-left: 2px;
		}
	}

	.slider .thumb
	{
		width: 10px;
		height: 10px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		backdrop-filter: invert( 1 );
		margin-left: 1px;
		pointer-events: none;
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}

	.hue .track
	{
		background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);

		.inner
		{
			display: none;
		}
	}

	.satval
	{
		background: linear-gradient(to right, white, transparent);
		height: 200px;
		position: relative;

		&:active
		{
			z-index: 10;
			cursor: none;
		}

		.value_gradient
		{
			background: linear-gradient(to bottom, black, white);
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			pointer-events: none;
			mix-blend-mode: multiply;
		}

		.thumb
		{
			z-index: 10;
		}
	}

	.presets
	{
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		padding: 15px;
		border-top: 1px solid rgba( white, 0.5 );

		.preset
		{
			background-color: white;
			width: 16px;
			height: 16px;
			margin: 2px;
			border-radius: 20px;
			cursor: pointer;
			
			&:hover
			{
				box-shadow: 0px 0px 1px 2px white;
			}
		}
	}
}


.coloreditorrgba
{
	flex-direction: column;

	.slider
	{
		padding-right: 16px;
	}

	.slider .track
	{
		background-color: transparent;
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;

		.inner
		{
			display: none;
		}
	}

	.slider .thumb
	{
		width: 12px;
		height: 12px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		margin-left: 2px;
		backdrop-filter: invert( 1 );
	}

	.red_slider .track
	{
		background-image: linear-gradient( to right, rgba( #e63439, 0.1 ), rgba( #e63439, 0.9 ) );
	}

	.green_slider .track
	{
		background-image: linear-gradient( to right, rgba( #54be35, 0.1 ), rgba( #54be35, 0.9 ) );
	}

	.blue_slider .track
	{
		background-image: linear-gradient( to right, rgba( #3472e6, 0.1 ), rgba( #3472e6, 0.9 ) );
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}
}


.coloreditorhsva
{
	flex-direction: column;

	.slider
	{
		padding-right: 16px;
	}

	.slider .track
	{
		background-color: transparent;
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;

		.inner
		{
			display: none;
		}
	}

	.slider .thumb
	{
		width: 12px;
		height: 12px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		margin-left: 2px;
		backdrop-filter: invert( 1 );
	}
		
	.hue_slider .track
	{
		background-image: linear-gradient( to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00 );
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}
}

menupanel
{
    position: absolute;
    z-index: 1000;
    pointer-events: all;
    font-size: 12px;
    flex-shrink: 0;

    .background
    {
        position: absolute;
        left: -5000px;
        right: -5000px;
        top: -5000px;
        bottom: -5000px;
    }

    > .inner
    {
        min-width: 200px;
        min-height: 20px;
        flex-direction: column;
        font-family: Poppins;
        font-weight: bold;
        border-radius: 10px;
        box-shadow: 5px 5px 30px #000e;
        background-color: #2a2a2a;
        flex-shrink: 0;

        .spacer
        {
            height: 1px;
            background-color: #0005;
        }

        .option
        {
            color: #fffa;
            padding: 0px 8px;
            cursor: pointer;
            flex-shrink: 0;
            height: 32px;

            &:first-child
            {
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }

            &:last-child
            {
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }

            .icon
            {
                padding: 8px;
                font-family: Material Icons;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
            }

            .text
            {
                padding: 8px;
                flex-shrink: 0;
            }

            &:hover
            {
                background-color: #3472e6;
                color: #f5f8fe;
            }
        }
    }
}

$form-control-height: 28px !default;

@import "form/_checkbox.scss";
@import "form/_switch.scss";
@import "form/_dropdown.scss";
@import "form/_coloreditor.scss";
@import "form/_colorproperty.scss";

.form
{
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	overflow: scroll;
}

.field-group
{
	flex-direction: column;
	flex-shrink: 0;
}

.field-header
{
	flex-shrink: 0;
}

.field
{
	color: white;
	font-size: 14px;
	flex-shrink: 0;
	flex-grow: 0;

	> .label
	{
		flex-grow: 0;
		flex-shrink: 0;
		font-weight: 600;
		opacity: 0.4;
		width: 20%;
		font-size: 13px;
	}

	> .control
	{
		flex-shrink: 0;
		flex-grow: 1;
		flex-direction: column;
	}
}

.is-vertical > .field, .field.is-vertical
{
	flex-direction: column;

	> .label
	{
		width: auto;
		height: auto;
	}
}

RootPanel
{
	font-family: Roboto;
	color: white;
}

IconPanel, i
{
	font-family: Material Icons;
	background-position: center;
	background-size: contain;
}

.tooltip
{
	background-color: rgba( black, 0.8 );
	border: 1px solid rgba( #555, 0.1 );
	padding: 10px;
	border-radius: 4px;
	color: white;
	font-family: Inter;
	font-weight: bold;
	transition: opacity 0.09s ease;
	opacity: 1;
	margin: 0px;

	&:intro, &:outro
	{
		opacity: 0;
	}
}

.textentry
{
	cursor: text;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	overflow: hidden;
	flex-direction: row;
	position: relative;
	padding: 10px;

	&.disabled
	{
		cursor: default;
	}

	&.is-multiline
	{
		align-items: flex-start;
		white-space: normal;
	}

	.content-label,
	.placeholder
	{
		flex-grow: 1;
	}

	.placeholder
	{
		opacity: 0.2;
		pointer-events: none;
	}

	.iconpanel
	{
		position: absolute;
		right: 0;
		padding-right: 10px;
		pointer-events: none;

		&.clearbutton
		{
			color: #fff;
			pointer-events: all;
			cursor: pointer;
			opacity: 0.1;

			&:hover
			{
				opacity: 0.5;
			}

			&:active
			{
				opacity: 1;
			}
		}
	}

	&:empty
	{
		.clearbutton
		{
			display: none;
		}
	}

	&.has-icon
	{
		padding-right: 30px;
	}

	.content-label,
	.prefix-label,
	.suffix-label,
	.placeholder
	{
		overflow: hidden;
	}

	.content-label
	{
		order: 1;
	}

	.suffix-label
	{
		order: 2;
	}

	.prefix-label,
	.suffix-label
	{
		flex-shrink: 0;
		opacity: 0.5;
	}

	&.invalid
	{
		box-shadow: 0px 0px 1px 2px #f8356b;
	}
}

.popup-panel
{
	background-color: #1b202c;
	flex-direction: column;
	color: #8e9ec2;
	transition: all 0.1s ease-out;
	position: absolute;
	z-index: 2000;
	min-height: 20px;
	min-width: 10px;
	overflow: scroll;
	pointer-events: all;
	box-shadow: 3px 3px 64px #000;
	border-radius: 4px;

	&.medium
	{
		max-width: 300px;
	}

	&.center-horizontal
	{
		transform-origin: top center;
	}

	&.below-center
	{
		transform: translateX( -50% );
		transform-origin: 0% 0%;
	}

	&.above-left
	{
		transform-origin: 0% 100%;
	}

	&.above-center
	{
		transform: translateX( -50% );
		transform-origin: 0% 100%;
	}

	&.left
	{
		transform-origin: 100% 50%;
		transform: translate( 00% -50% );
	}

	&.right
	{
		transform-origin: 0 50%;
		transform: translate( 0% -50% );
	}

	&:intro
	{
		transform: scale( 0 );
		pointer-events: none;
		opacity: 0;
	}

	&:outro
	{
		opacity: 0;
		transition: all 0.1s ease-in;
		margin-top: 50px;
		pointer-events: none;
	}

	&.below-stretch
	{
		transform-origin: 0% 0%;

		&:intro
		{
			transform: scaleY( 0.1 );
		}
	}

	> .canvas
	{
		flex-direction: column;
	}

	.information
	{
		padding: 16px;
		font-size: 14px;
		opacity: 0.5;
	}

	button
	{
		padding: 2px 8px;
		cursor: pointer;
		font-family: Poppins;
		font-weight: 600;
		flex-shrink: 0;

		&:hover
		{
			background-color: #08f;
			color: #fff;
		}
	}
}

$primary: red !default;
$primary-alt: white !default;

$switch-padding: 6px !default;

.button.popupbutton.dropdown
{
	cursor: pointer;
	transition: all .1s ease-out;
	position: relative;

	> .dropdown_indicator
	{
		position: absolute;
		right: 8px;
	}

	&.open
	{
		border-bottom-left-radius: 1px;
		border-bottom-right-radius: 1px;
		transition: border-radius 0.2s ease-out;
	}
}

select
{
	min-height: 40px;

	> option
	{
		display: none;
	}
}

$primary: red !default;
$primary-alt: white !default;

$switch-padding: 6px !default;

.coloreditor
{
	flex-direction: column;
	min-width: 250px;
	max-width: 250px;

	> .canvas
	{
		border-top: 1px solid rgba( white, 0.5 );
		flex-grow: 1;
		flex-direction: column;
		padding: 10px 15px;


		> textentry.textentry
		{
			flex-grow: 0;
			flex-shrink: 0;
			width: auto;
		}
	}

	.slider
	{
		padding: 6.5px;
	}

	.slider .track
	{
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;
		transition: all 0.1s ease-out;

		.inner
		{
			display: none;
		}
	}

	.slider:hover, .slider:active
	{
		padding: 7px;

		.track
		{
			height: 20px;
			border-radius: 6px;
		}

		.thumb
		{
			width: 10px;
			height: 16px;
			margin-left: 2px;
		}
	}

	.slider .thumb
	{
		width: 10px;
		height: 10px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		backdrop-filter: invert( 1 );
		margin-left: 1px;
		pointer-events: none;
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}

	.hue .track
	{
		background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);

		.inner
		{
			display: none;
		}
	}

	.satval
	{
		background: linear-gradient(to right, white, transparent);
		height: 200px;
		position: relative;

		&:active
		{
			z-index: 10;
			cursor: none;
		}

		.value_gradient
		{
			background: linear-gradient(to bottom, black, white);
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			pointer-events: none;
			mix-blend-mode: multiply;
		}

		.thumb
		{
			z-index: 10;
		}
	}

	.presets
	{
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		padding: 15px;
		border-top: 1px solid rgba( white, 0.5 );

		.preset
		{
			background-color: white;
			width: 16px;
			height: 16px;
			margin: 2px;
			border-radius: 20px;
			cursor: pointer;
			
			&:hover
			{
				box-shadow: 0px 0px 1px 2px white;
			}
		}
	}
}


.coloreditorrgba
{
	flex-direction: column;

	.slider
	{
		padding-right: 16px;
	}

	.slider .track
	{
		background-color: transparent;
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;

		.inner
		{
			display: none;
		}
	}

	.slider .thumb
	{
		width: 12px;
		height: 12px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		margin-left: 2px;
		backdrop-filter: invert( 1 );
	}

	.red_slider .track
	{
		background-image: linear-gradient( to right, rgba( #e63439, 0.1 ), rgba( #e63439, 0.9 ) );
	}

	.green_slider .track
	{
		background-image: linear-gradient( to right, rgba( #54be35, 0.1 ), rgba( #54be35, 0.9 ) );
	}

	.blue_slider .track
	{
		background-image: linear-gradient( to right, rgba( #3472e6, 0.1 ), rgba( #3472e6, 0.9 ) );
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}
}


.coloreditorhsva
{
	flex-direction: column;

	.slider
	{
		padding-right: 16px;
	}

	.slider .track
	{
		background-color: transparent;
		height: 14px;
		border-radius: 14px;
		left: 0px;
		right: 0px;

		.inner
		{
			display: none;
		}
	}

	.slider .thumb
	{
		width: 12px;
		height: 12px;
		box-shadow: 0px 0px 0px transparent;
		background-color: white;
		margin-left: 2px;
		backdrop-filter: invert( 1 );
	}
		
	.hue_slider .track
	{
		background-image: linear-gradient( to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00 );
	}

	.alpha_slider .track
	{
		background-image: linear-gradient( to right, rgba( #ccc, 0.05 ), rgba( #ccc, 0.9 ) );
	}
}

menupanel
{
    position: absolute;
    z-index: 1000;
    pointer-events: all;
    font-size: 12px;
    flex-shrink: 0;

    .background
    {
        position: absolute;
        left: -5000px;
        right: -5000px;
        top: -5000px;
        bottom: -5000px;
    }

    > .inner
    {
        min-width: 200px;
        min-height: 20px;
        flex-direction: column;
        font-family: Poppins;
        font-weight: bold;
        border-radius: 10px;
        box-shadow: 5px 5px 30px #000e;
        background-color: #2a2a2a;
        flex-shrink: 0;

        .spacer
        {
            height: 1px;
            background-color: #0005;
        }

        .option
        {
            color: #fffa;
            padding: 0px 8px;
            cursor: pointer;
            flex-shrink: 0;
            height: 32px;

            &:first-child
            {
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }

            &:last-child
            {
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }

            .icon
            {
                padding: 8px;
                font-family: Material Icons;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
            }

            .text
            {
                padding: 8px;
                flex-shrink: 0;
            }

            &:hover
            {
                background-color: #3472e6;
                color: #f5f8fe;
            }
        }
    }
}

ColorAlphaControl
{
	gap: 0.5rem;
	flex-grow: 1;
	pointer-events: all;
	background: linear-gradient( to right, black, white );
	border-radius: 4px;
	padding: 2px;
	height: 12px;
	position: relative;
	cursor: pointer;
	border: 1px solid #333;

	&:hover
	{
		border: 1px solid #08f;
	}

	&:active
	{
		border: 1px solid #fff;
	}

	.handle
	{
		top: -5px;
		bottom: -5px;
		aspect-ratio: 1;
		border-radius: 100px;
		border: 2px solid #444;
		position: absolute;
		background-color: white;
		box-shadow: 2px 2px 16px #000a;
		transform: translateX( -50% );
		pointer-events: none;
	}
}

@import "/styles/_theme.scss";

$primary: $primary-blue !default;
$primary-alt: white !default;
$form-control-height: 24px !default;

.checkbox
{
	cursor: pointer;
	color: rgba( $primary-alt, 0.6 );
	align-items: center;
	gap: 8px;

	label
	{
		pointer-events: none;
	}

	> .checkmark
	{
		padding: 1px;
		font-size: 22px;
		border: 1px solid $primary;
		border-radius: $rounding-small;
		text-align: center;
		justify-content: center;
		align-items: center;
		color: transparent;
		min-height: $form-control-height;
		pointer-events: none;
		flex-shrink: 0;
	}

	&.checked
	{
		> .checkmark
		{
			color: $primary-alt;
			background-color: $primary;
		}
	}

	&:active
	{
		color: $primary-alt;
	}

	&:hover
	{
		color: $primary-alt;
	}
}

PerkWorldPanel {
	position: absolute;
	pointer-events: none;
	justify-content: center;
	align-items: center;
	align-content: center;
	//width: 256px;
	//height: 256px;
	width: 100%;
	height: 100%;

	.rarity {
		position: relative;
		width: 100%;
		height: 100%;
		aspect-ratio: 1;
		background-size: cover;
		//background-image: url(textures/ui/gradient/gradient.png);
		justify-content: center;
		align-items: center;
		align-content: center;
	}

	.icon {
		position: relative;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center center;
	}
	//&:intro {
	//	opacity: 1;
	//	transform: scale(0.1);
	//}
}

ColorHueControl
{
	gap: 0.5rem;
	flex-grow: 1;
	pointer-events: all;
	background: linear-gradient( to right, red, yellow, lime, cyan, blue, magenta, red );
	border-radius: 4px;
	padding: 2px;
	height: 12px;
	position: relative;
	cursor: pointer;
	margin: 10px 0;
	border: 1px solid #333;

	&:hover
	{
		border: 1px solid #08f;
	}

	&:active
	{
		border: 1px solid #fff;
	}

	.handle
	{
		top: -5px;
		bottom: -5px;
		aspect-ratio: 1;
		border-radius: 100px;
		border: 2px solid #444;
		position: absolute;
		background-color: white;
		box-shadow: 2px 2px 16px #000a;
		transform: translateX( -50% );
		pointer-events: none;
	}
}