.select-component {
	--anchor-name: --test;
	display: inline-flex;

	select {
		display: none;
	}

	.title {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		anchor-name: var(--anchor-name);
		font-weight: bold;

		span {
		}

		svg {
			transition: all 0.2s linear;
		}
	}

	&:has(:popover-open) {
		.title svg {
			transform: rotateZ(-180deg);
		}
	}
	.dropdown {
		position-anchor: var(--anchor-name);
		position-area: bottom span-right;
		border-radius: 1rem;
		box-shadow: 0 4px 4px 0
			color-mix(in oklab, var(--color-black) 25%, transparent);
		opacity: 1;
		translate: 0 0.5rem;
		transition-behavior: allow-discrete;
		transition-duration: 0.2s;
		transition-timing-function: linear;
		position-try-fallbacks: flip-inline;

		@starting-style {
			&:popover-open {
				opacity: 0;
				translate: 0 1.5rem;
			}
		}
		&:not(:popover-open) {
			opacity: 0;
			translate: 0 1.5rem;
		}

		button {
			display: flex;
			padding: 1.125rem 1rem;
			width: 100%;
			font-weight: bold;
			text-align: left;
			&:hover,
			&.selected {
				background-color: color-mix(
					in oklab,
					var(--color-gray) 60%,
					transparent
				);
			}
		}
	}
}