.ct-trigger {
	display: flex;
	align-items: center;
	width: 18px;
	height: 18px;
	
	span {
		position: relative;
		width: inherit;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: background 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

		&:before, &:after {
			position: absolute;
			content: '';
			width: var(--triggerWidth, 18px);
			height: inherit;
			border-radius: inherit;
			background: currentColor;
			transition: width 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
						transform 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}

		&:before {
			transform: translateY(var(--ty, -6px)) translateX(var(--tx, 0)) rotate(var(--rotate, 0));
		}

		&:after {
			transform: translateY(var(--ty, 6px)) translateX(var(--tx, 0)) rotate(var(--rotate, 0));
		}
	}

	// type 2
	&[data-type="type-2"] span {
		&:before {
			--tx: 8px;
			--triggerWidth: 10px;
		}

		&:after {
			--tx: 3px;
			--triggerWidth: 15px;
		}
	}

	// type 3
	&[data-type="type-3"] span {
		&:before {
			--tx: 6px;
			--triggerWidth: 12px;
		}

		&:after {
			--tx: 0px;
			--triggerWidth: 12px;
		}
	}
}

// hover action
.ct-header-trigger {
	&:hover {
		[data-type="type-2"] span {
			&:before, &:after {
				--tx: 0;
			}
		}

		[data-type="type-3"] span {
			&:before, &:after {
				--tx: 0;
				--triggerWidth: 100%;
			}
		}
	}
}

// closed state
.close-button {
	.closed {
		color: var(--closeTriggerColor, #fff);
		opacity: 0.7;
		transition: opacity 0.2s ease-out, transform 0.2s ease-out;

		span {
			--ty: 0;
			background: transparent;

			&:before {
				--rotate: 45deg;
			}

			&:after {
				--rotate: -45deg;
			}
		}
	}

	&:hover {
		.closed {
			opacity: 1;
			transform: rotate(90deg);
		}
	}
}


// hide trigger when off-canvas is oppened
[data-panel*='in'] {
	.ct-header-trigger {
		opacity: 0;
	}
}