// Self-contained pixel dropdown styling. Lives on the PixelDropdown component itself, so it reliably
// styles the component's own internals (unlike a parent stylesheet, which s&box does not cascade into
// child components). Flat blocky box + hard drop-down list, matching the PixelSlider / menu aesthetic.
@import "Theme.scss";

$white: #f8f5e6;   // game WHITE
$black: #3a404c;   // game BLACK
$yellow: #dddd99;  // Original player color

.pixel-dropdown
{
	position: relative;      // anchor for the absolutely-placed menu + backdrop
	flex-direction: column;
	// Self-contained: a parent stylesheet does NOT cascade into this child component, so opt back
	// into pointer events here so the control is always clickable wherever it's placed.
	pointer-events: all;
	font-family: $font;
	font-smooth: never;

	.header
	{
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 48px;
		padding: 0 12px;
		background-color: $black;
		border: 3px solid $white;
		cursor: blank-hand;

		.value
		{
			font-size: 28px;
			color: $white;
		}

		.arrow
		{
			font-size: 20px;
			color: $yellow;
			margin-left: 14px;
		}

		&:hover { background-color: lighten($black, 8%); }
	}

	// Drop the header edge that meets the open menu so the two read as one continuous panel.
	&.open.down .header { border-bottom-width: 0; }
	&.open.up .header { border-top-width: 0; }

	// Full-screen click-catcher behind the menu. Stretched far past the 1080-ref viewport so an
	// outside click anywhere dismisses the menu. Transparent; sits under the menu (drawn first).
	.backdrop
	{
		position: absolute;
		top: -3000px;
		left: -4000px;
		width: 9000px;
		height: 7000px;
		background-color: transparent;
		z-index: 40;
	}

	// Anchored directly below the header (.down) or stacked directly above it (.up).
	&.down .menu { top: 100%; }
	&.up .menu { bottom: 100%; }

	.menu
	{
		position: absolute;
		left: 0;
		right: 0;
		flex-direction: column;
		background-color: $black;
		border: 3px solid $white;
		z-index: 50;             // above the backdrop (and any sibling content below the bar)

		.option
		{
			flex-direction: row;
			align-items: center;
			height: 44px;
			padding: 0 12px;
			cursor: blank-hand;

			label
			{
				font-size: 26px;
				color: $white;
			}

			&:hover
			{
				background-color: rgba(221, 221, 153, 0.25);
			}

			// Currently-selected row: yellow bar so the open list shows the active choice.
			&.sel
			{
				background-color: rgba(221, 221, 153, 0.4);
				label { color: $yellow; }
			}
		}
	}
}