[class^="eicon-flex"], [class*=" eicon-flex"] {
	transition: .3s all;

	&.eicon-inline {
		max-height: 1em;
		max-width: 1em;
	}

	@if 'rtl' == $direction {
		--is-ltr: 0;
		--is-rtl: 1;
	} @else {
		--is-ltr: 1;
		--is-rtl: 0;
	}

	// Rotation direction - Will be `1` for LTR, `-1` for RTL.
	&:is(.eicon-justify-start-h,.eicon-justify-end-h) {
		--rotation-direction: calc(var(--is-ltr) + var(--is-rtl));
  	}
  	--rotation-direction: calc(var(--is-ltr) - var(--is-rtl));

	// Rotate flex icons based on RTL/LTR & flex direction.
	&:not( .eicon-wrap ):not( .eicon-nowrap ):not( .eicon-grow ) {
		// Container direction column / reversed column.
		:is( .e-ui-state--document-direction-mode__column, .e-ui-state--document-direction-mode__column-reverse ) & {
			transform: rotate( calc( var( --rotation-direction ) * 90deg ) );

			&:is( .eicon-align-start-v, .eicon-align-end-v ) {
				transform: rotate( calc( var( --rotation-direction ) * -90deg ) );
			}
		}

		// Container direction reversed column.
		.e-ui-state--document-direction-mode__column-reverse & {
			&:is( .eicon-justify-start-h, .eicon-justify-end-h, .eicon-order-start, .eicon-order-end ) {
				transform: rotate( calc( var( --rotation-direction ) * -90deg ) );
			}
		}

		// Container direction row
		.e-ui-state--document-direction-mode__row & {
			&:is( .eicon-justify-start-h, .eicon-justify-end-h, .eicon-order-start, .eicon-order-end ) {
				transform: rotate( calc( var( --is-rtl ) * 180deg ) );
			}
		}

		// Container direction reversed row
		.e-ui-state--document-direction-mode__row-reverse & {
			&:is( .eicon-justify-start-h, .eicon-justify-end-h, .eicon-order-start, .eicon-order-end ) {
				transform: rotate( calc( var( --is-ltr ) * 180deg ) );
			}
		}
	}
}
