/** Animated toggle icon */
.vred-toggle-icon {
	--vred-toggle-icon-width: 24px;
	--vred-toggle-icon-line-thickness: 2px;
	--vred-toggle-icon-line-gap: 5px;
	--vred-toggle-icon-line-radius: 2px;
	--vred-toggle-icon-duration: 200ms;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--vred-toggle-icon-width);
	height: calc((var(--vred-toggle-icon-line-thickness) * 3) + (var(--vred-toggle-icon-line-gap) * 2));
	color: currentColor;
	line-height: 1
}
.vred-toggle-icon__box {
	position: relative;
	display: block;
	width: var(--vred-toggle-icon-width);
	height: calc((var(--vred-toggle-icon-line-thickness) * 3) + (var(--vred-toggle-icon-line-gap) * 2))
}
.vred-toggle-icon__line,
.vred-toggle-icon__line::before,
.vred-toggle-icon__line::after {
	position: absolute;
	left: 0;
	display: block;
	width: var(--vred-toggle-icon-width);
	height: var(--vred-toggle-icon-line-thickness);
	border-radius: var(--vred-toggle-icon-line-radius);
	background-color: currentColor;
	transition:
		top var(--vred-toggle-icon-duration) ease,
		bottom var(--vred-toggle-icon-duration) ease,
		opacity var(--vred-toggle-icon-duration) ease,
		transform var(--vred-toggle-icon-duration) ease
}
.vred-toggle-icon__line {
	top: 50%;
	transform: translateY(-50%)
}
.vred-toggle-icon__line::before,
.vred-toggle-icon__line::after {
	content: ""
}
.vred-toggle-icon__line::before {
	top: calc((var(--vred-toggle-icon-line-gap) + var(--vred-toggle-icon-line-thickness)) * -1)
}
.vred-toggle-icon__line::after {
	bottom: calc((var(--vred-toggle-icon-line-gap) + var(--vred-toggle-icon-line-thickness)) * -1)
}
[aria-expanded="true"] > .vred-toggle-icon,
[aria-expanded="true"] .vred-toggle-icon {
	color: var(--vred-toggle-icon-active-color, currentColor)
}
.vred-toggle-icon--collapse .vred-toggle-icon__line {
	transition-delay: calc(var(--vred-toggle-icon-duration) * .13)
}
[aria-expanded="true"] .vred-toggle-icon--collapse .vred-toggle-icon__line {
	transform: translateY(-50%) rotate(45deg);
	transition-delay: calc(var(--vred-toggle-icon-duration) * .13)
}
[aria-expanded="true"] .vred-toggle-icon--collapse .vred-toggle-icon__line::before {
	top: 0;
	opacity: 0
}
[aria-expanded="true"] .vred-toggle-icon--collapse .vred-toggle-icon__line::after {
	bottom: 0;
	transform: rotate(-90deg)
}
[aria-expanded="true"] .vred-toggle-icon--squeeze .vred-toggle-icon__line {
	transform: translateY(-50%) rotate(45deg)
}
[aria-expanded="true"] .vred-toggle-icon--squeeze .vred-toggle-icon__line::before {
	top: 0;
	opacity: 0
}
[aria-expanded="true"] .vred-toggle-icon--squeeze .vred-toggle-icon__line::after {
	bottom: 0;
	transform: rotate(-90deg)
}
[aria-expanded="true"] .vred-toggle-icon--spin .vred-toggle-icon__line {
	transform: translateY(-50%) rotate(225deg)
}
[aria-expanded="true"] .vred-toggle-icon--spin .vred-toggle-icon__line::before {
	top: 0;
	opacity: 0
}
[aria-expanded="true"] .vred-toggle-icon--spin .vred-toggle-icon__line::after {
	bottom: 0;
	transform: rotate(-90deg)
}
[aria-expanded="true"] .vred-toggle-icon--slider .vred-toggle-icon__line {
	transform: translate3d(calc(var(--vred-toggle-icon-width) * .12), -50%, 0) rotate(45deg)
}
[aria-expanded="true"] .vred-toggle-icon--slider .vred-toggle-icon__line::before {
	top: 0;
	opacity: 0;
	transform: translate3d(calc(var(--vred-toggle-icon-width) * -.25), 0, 0)
}
[aria-expanded="true"] .vred-toggle-icon--slider .vred-toggle-icon__line::after {
	bottom: 0;
	transform: translate3d(calc(var(--vred-toggle-icon-width) * -.25), 0, 0) rotate(-90deg)
}
[aria-expanded="true"] .vred-toggle-icon--arrow .vred-toggle-icon__line {
	transform: translateY(-50%) rotate(180deg)
}
[aria-expanded="true"] .vred-toggle-icon--arrow .vred-toggle-icon__line::before,
[aria-expanded="true"] .vred-toggle-icon--arrow .vred-toggle-icon__line::after {
	width: calc(var(--vred-toggle-icon-width) * .55);
	transform-origin: left center
}
[aria-expanded="true"] .vred-toggle-icon--arrow .vred-toggle-icon__line::before {
	top: 0;
	transform: rotate(45deg)
}
[aria-expanded="true"] .vred-toggle-icon--arrow .vred-toggle-icon__line::after {
	bottom: 0;
	transform: rotate(-45deg)
}
[aria-expanded="true"] .vred-toggle-icon--minus .vred-toggle-icon__line::before {
	top: 0;
	opacity: 0
}
[aria-expanded="true"] .vred-toggle-icon--minus .vred-toggle-icon__line::after {
	bottom: 0;
	opacity: 0
}
@media (prefers-reduced-motion: reduce) {
	.vred-toggle-icon__line,
	.vred-toggle-icon__line::before,
	.vred-toggle-icon__line::after {
		transition: none
	}
}