.wc-interactivity-dropdown {
	position: relative;
	width: 100%;
	gap: 16px;

	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-decoration: inherit;
	text-transform: inherit;

	.wc-interactivity-dropdown__selected-badge {
		@include font-size(smaller);
		padding: 0.25em 0.25em 0.25em 0.75em;
		margin: 2px 0;
		border-radius: em(20px);
		border: 1px solid $black;
		display: inline-flex;
		align-items: center;
		gap: em(4px);

		.wc-interactivity-dropdown__badge-text {
			margin-right: 0.25em;
		}

		.wc-interactivity-dropdown__badge-remove {
			background-color: $gray-200;
			cursor: pointer;
			border-radius: em(20px);
		}
	}

	.wc-interactivity-dropdown__dropdown {
		.wc-interactivity-dropdown__dropdown-selection {
			display: flex;
			padding: 4px 30px 4px 8px;
			border: 1px solid $gray-700;
			border-radius: em(4px);
			cursor: pointer;
			align-items: center;

			.wc-interactivity-dropdown__placeholder {
				@include font-size(smaller);
				margin: 0.25em 0;
				display: flex;
				justify-content: center;
				flex-direction: column;
				height: 30px;
			}
		}

		.wc-interactivity-dropdown__svg-container {
			> svg {
				position: absolute;
				right: 8px;
				top: 50%;
				transform: translateY(-50%);
				pointer-events: none;
			}
		}

		.wc-interactivity-dropdown__dropdown-list {
			position: absolute;
			width: 100%;
			background: $white;
			border: 1px solid $gray-700;
			border-radius: em(4px);
			z-index: 1000;
			margin-top: $gap-smaller;
			box-sizing: border-box;

			.wc-interactivity-dropdown__dropdown-option {
				margin: $gap-small;
				padding: $gap-small;
				border-radius: em(4px);
				border: 1px solid $gray-400;
				@include font-size(small);
				cursor: pointer;
				&:hover,
				&:focus,
				&.is-selected {
					background-color: $gray-100;
				}
			}
		}
	}
}