/* TODO: Use SVG animtation to replace CSS icons */
.citizen-drawer {
	.citizen-menu__dropdownButton {
		.citizen-ui-icon {
			display: grid;
			place-content: center;
			transition: var( --transition-hover );
			transition-property: transform;

			> span {
				display: block;
				width: 1.125rem;
				height: 0.125rem;
				margin: 0.09375rem 0;
				background-color: #000;
				filter: var( --filter-invert );
				border-radius: var( --border-radius--large );
				opacity: var( --opacity-icon-base );
				transition: inherit;
				transform-origin: 0.25rem 0;

				&:first-child {
					transform-origin: 0 0;
				}

				&:nth-child( 2 ) {
					transform-origin: 0 100%;
				}
			}

			// Since this is a CSS icon, we don't need this
			&::before {
				content: none;
			}
		}

		&:hover {
			.citizen-ui-icon {
				> span {
					opacity: var( --opacity-icon-base--hover );

					&:first-child {
						transform: translate3d( -50%, 0, 0 );
					}
				}
			}
		}

		&:active {
			.citizen-ui-icon {
				> span {
					opacity: var( --opacity-icon-base--active );
				}
			}
		}
	}

	&.citizen-menu__dropdown[ open ] {
		.citizen-menu__dropdownButton {
			.citizen-ui-icon {
				> span {
					&:first-child {
						opacity: 0;
						/* @noflip */
						transform: rotate( 0deg ) scale( 0.2, 0.2 );
					}
					// Reflect line
					&:nth-child( 2 ) {
						/* @noflip */
						transform: rotate( -45deg ) translate3d( -0.125rem, 0.375rem, 0 );
					}

					// Hide line
					&:last-child {
						/* @noflip */
						transform: rotate( 45deg ) translate3d( -0.3125rem, -0.4375rem, 0 );
					}
				}
			}

			&:hover {
				.citizen-ui-icon {
					transform: scale( 0.85 );
				}
			}
		}
	}
}

// RTL
.rtl {
	.citizen-drawer .citizen-menu__dropdownButton:hover {
		.citizen-ui-icon > span:first-child {
			transform: translate3d( 50%, 0, 0 );
		}
	}
}