.c-menu-dropdown {
	&__button {
		color: var(--color-text-primary);

		& > .c-icon {
			color: var(--color-primary-500);
		}

		&:hover {
			background-color: var(--color-primary-100);
		}

		&.is-active,
		&:active {
			background-color: var(--color-primary-100);
			color: var(--color-primary);
		}
	}

	&[data-preferred-direction='up'] .c-menu-dropdown__button  > .c-icon {
		transform: rotate(-90deg);
	}

	&[data-preferred-direction='down'] .c-menu-dropdown__button > .c-icon {
		transform: rotate(90deg);
	}
}
