.keelson-burger-toggle {
	--keelson-burger-width: 40px;
	--keelson-burger-thickness: 4px;
	--keelson-burger-gap: 10px;
	--keelson-burger-button-size: 50px;
	--keelson-burger-radius: 4px;
	--keelson-burger-color: currentColor;
	--keelson-burger-offset: 14px;
	--keelson-burger-offset-half: 7px;
	align-items: center;
	appearance: none;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	height: var(--keelson-burger-button-size);
	justify-content: center;
	line-height: 1;
	margin: 0;
	padding: 0;
	position: relative;
	width: var(--keelson-burger-button-size);
}

.keelson-burger-toggle__bars {
	align-items: center;
	display: inline-flex;
	flex-direction: column;
	gap: var(--keelson-burger-gap);
	justify-content: center;
	transition: transform 0.18s ease;
	width: var(--keelson-burger-width);
}

.keelson-burger-toggle__bar {
	background: var(--keelson-burger-color);
	border-radius: var(--keelson-burger-radius);
	display: block;
	height: var(--keelson-burger-thickness);
	transform-origin: center;
	transition: opacity 0.15s ease, transform 0.15s ease;
	width: var(--keelson-burger-width);
}

.keelson-burger-toggle--top-layer {
	margin: 0 !important;
	position: fixed !important;
	z-index: var(--keelson-burger-top-z-index, 1002) !important;
}

.keelson-burger-toggle--boring[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(1),
.keelson-burger-toggle--spin[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(1) {
	transform: translateY(var(--keelson-burger-offset)) rotate(45deg);
}

.keelson-burger-toggle--boring[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(2),
.keelson-burger-toggle--spin[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(2) {
	opacity: 0;
}

.keelson-burger-toggle--boring[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(3),
.keelson-burger-toggle--spin[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(3) {
	transform: translateY(calc(var(--keelson-burger-offset) * -1)) rotate(-45deg);
}

.keelson-burger-toggle--spin.is-active .keelson-burger-toggle__bars {
	transform: rotate(180deg);
}

.keelson-burger-toggle--collapse .keelson-burger-toggle__bar {
	transition-duration: 0.18s;
	transition-property: opacity, transform, width;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.keelson-burger-toggle--collapse[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(1) {
	transform: translateY(var(--keelson-burger-offset)) rotate(45deg);
}

.keelson-burger-toggle--collapse[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.keelson-burger-toggle--collapse[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(3) {
	transform: translateY(calc(var(--keelson-burger-offset) * -1)) rotate(-45deg);
}

.keelson-burger-toggle--squeeze .keelson-burger-toggle__bar {
	transition-duration: 0.12s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.keelson-burger-toggle--squeeze[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(1) {
	transform: translateY(var(--keelson-burger-offset)) rotate(45deg);
}

.keelson-burger-toggle--squeeze[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(2) {
	opacity: 0;
	transform: scaleX(0.25);
}

.keelson-burger-toggle--squeeze[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(3) {
	transform: translateY(calc(var(--keelson-burger-offset) * -1)) rotate(-45deg);
}

.keelson-burger-toggle--minus[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(1),
.keelson-burger-toggle--minus[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(3) {
	opacity: 0;
}

.keelson-burger-toggle--minus[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(1) {
	transform: translateY(var(--keelson-burger-offset));
}

.keelson-burger-toggle--minus[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(3) {
	transform: translateY(calc(var(--keelson-burger-offset) * -1));
}

.keelson-burger-toggle--arrow[data-bars="3"] .keelson-burger-toggle__bar,
.keelson-burger-toggle--arrow-r[data-bars="3"] .keelson-burger-toggle__bar {
	transform-origin: center;
}

.keelson-burger-toggle--arrow[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(1) {
	transform: translateX(calc(var(--keelson-burger-width) * -0.18)) translateY(var(--keelson-burger-offset-half)) rotate(-45deg) scaleX(0.7);
}

.keelson-burger-toggle--arrow[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(3) {
	transform: translateX(calc(var(--keelson-burger-width) * -0.18)) translateY(calc(var(--keelson-burger-offset-half) * -1)) rotate(45deg) scaleX(0.7);
}

.keelson-burger-toggle--arrow-r[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(1) {
	transform: translateX(calc(var(--keelson-burger-width) * 0.18)) translateY(var(--keelson-burger-offset-half)) rotate(45deg) scaleX(0.7);
}

.keelson-burger-toggle--arrow-r[data-bars="3"].is-active .keelson-burger-toggle__bar:nth-child(3) {
	transform: translateX(calc(var(--keelson-burger-width) * 0.18)) translateY(calc(var(--keelson-burger-offset-half) * -1)) rotate(-45deg) scaleX(0.7);
}

.keelson-burger-toggle[data-bars="2"].is-active .keelson-burger-toggle__bar:nth-child(1) {
	transform: translateY(var(--keelson-burger-offset-half)) rotate(45deg);
}

.keelson-burger-toggle[data-bars="2"].is-active .keelson-burger-toggle__bar:nth-child(2) {
	transform: translateY(calc(var(--keelson-burger-offset-half) * -1)) rotate(-45deg);
}

.keelson-burger-toggle[data-bars="1"].is-active .keelson-burger-toggle__bar {
	transform: rotate(45deg);
}