@import "/ui/styles/_theme.scss";

.button.popupbutton.dropdown {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	padding: 9px 32px 9px 11px;
	background-color: $bg-2;
	border: 2px solid $accent;
	color: $text;
	font-size: $fs-2;
	font-weight: 500;
	font-family: $font-secondary;
	cursor: pointer;
	transition: border-color 0.1s ease, background-color 0.1s ease;

	.label {
		flex-grow: 1;
		color: $text;
		text-align: left;
	}

	> .dropdown_indicator {
		position: absolute;
		right: 8px;
		width: 16px;
		height: 16px;
		font-size: $fs-3;
		color: $text-faint;
		transition: color 0.1s ease, transform 0.15s ease;
	}

	&:hover {
		border-color: $accent;
		background-color: $bg-elev;
		> .dropdown_indicator { color: $accent; }
	}

	&.open, &.active {
		border-color: $accent;
		background-color: $bg-elev;
		> .dropdown_indicator { color: $accent; transform: rotate(180deg); }
	}
}

.popup-panel {
	flex-direction: column;
	background-color: $bg-elev;
	border: 1px solid $accent;
	padding: 4px;
	gap: 2px;
	z-index: 1000;
	pointer-events: all;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);

	&.flat-top {
		border-top-width: 0;
	}

	button {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		padding: 8px 10px;
		background-color: transparent;
		border: 1px solid transparent;
		color: $text-dim;
		font-size: $fs-2;
		font-weight: 500;
		font-family: $font-secondary;
		cursor: pointer;
		text-align: left;
		transition: background-color 0.08s ease, color 0.08s ease;

		.label {
			text-align: left;
		}

		&:hover {
			background-color: $accent-soft;
			color: $text;
		}

		&.active {
			background-color: $accent-soft;
			color: $accent;
			border-color: $accent;
		}
	}
}