@use "../../../../../../scss/admin/variables";

.dropdownMenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	padding: 4px 0;
	border-radius: variables.$radius-lg;
	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);

	:global(button) {
		align-items: center;
		display: flex;
		gap: 0.25rem;
		width: 100%;
		padding: variables.$spacing-sm 20px;
		color: variables.$text-text-secondary;
		background-color: variables.$surface-surface-background-white;
		text-align: left;
		border: none;
		cursor: pointer;

		&:hover,
		&:hover.is-selected {
			background-color: variables.$surface-surface-background-light;
		}
	}

	:global(button.is-selected) {
		background-color: variables.$surface-surface-background-light;
	}
}
