/**
 * Greyd burger button.
 * 
 * Based on @link https://github.com/jonsuh/greyd-burgers
 */
.greyd-burger-btn {
	/* button */
	--button-color: none;
	--button-size: 48px;
	--button-radius: 2px;
	display: grid;
	place-items: center;
	padding: 0;
	margin: 0;
	width: var(--button-size);
	height: var(--button-size);
	border-radius: var(--button-radius);
	background: var(--button-color);

	/* burger */
	--burger-color: currentColor;
	--burger-width: 28px;
	--burger-stroke: 3px;
	--burger-gap: 6px;
	color: var(--burger-color)
}

.greyd-burger {
	width: var(--burger-width);
	height: calc( var(--burger-stroke) + var(--burger-stroke) + var(--burger-stroke) + var(--burger-gap) + var(--burger-gap) );
	display: inline-block;
	position: relative;
}

.greyd-burger-inner {
	display: block;
	top: 50%;
	margin-top: calc( var(--burger-stroke) / -2 );
}

.greyd-burger-inner,
.greyd-burger-inner::before,
.greyd-burger-inner::after {
	position: absolute;
	width: var(--burger-width);
	height: var(--burger-stroke);
	border-radius: 0;
	/**
	 * Use currentColor as the background. That way it is
	 * transitioned simultaneously to the parent background
	 * without the transition-delay set on this element.
	 */
	background: currentColor;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}

.greyd-burger-inner::before,
.greyd-burger-inner::after {
	content: "";
	display: block;
}

.greyd-burger-inner::before {
	top: calc( -1 * ( var(--burger-stroke) + var(--burger-gap) ) );
}

.greyd-burger-inner::after {
	bottom: calc( -1 * ( var(--burger-stroke) + var(--burger-gap) ) );
}

/**
 * Boring
 */
.greyd-burger--boring .greyd-burger-inner,
.greyd-burger--boring .greyd-burger-inner::before,
.greyd-burger--boring .greyd-burger-inner::after {
	transition-property: none;
}

.greyd-burger--boring.is-active .greyd-burger-inner {
	transform: rotate(45deg);
}

.greyd-burger--boring.is-active .greyd-burger-inner::before {
	top: 0;
	opacity: 0;
}

.greyd-burger--boring.is-active .greyd-burger-inner::after {
	bottom: 0;
	transform: rotate(-90deg);
}

/**
 * Collapse
 */
.greyd-burger--collapse .greyd-burger-inner {
	top: auto;
	bottom: 0;
	transition-duration: 0.13s;
	transition-delay: 0.13s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.greyd-burger--collapse .greyd-burger-inner::after {
	top: calc( -2 * ( var(--burger-stroke) + var(--burger-gap) ) );
	transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.greyd-burger--collapse .greyd-burger-inner::before {
	transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.greyd-burger--collapse.is-active .greyd-burger-inner {
	transform: translate3d(0, calc( -1 * ( var(--burger-stroke) + var(--burger-gap) ) ), 0) rotate(-45deg);
	transition-delay: 0.22s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.greyd-burger--collapse.is-active .greyd-burger-inner::after {
	top: 0;
	opacity: 0;
	transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

.greyd-burger--collapse.is-active .greyd-burger-inner::before {
	top: 0;
	transform: rotate(-90deg);
	transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/**
 * Elastic
 */
.greyd-burger--elastic .greyd-burger-inner {
	top: calc( var(--burger-stroke) / 2 );
	transition-duration: 0.275s;
	transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.greyd-burger--elastic .greyd-burger-inner::before {
	top: calc( var(--burger-stroke) + var(--burger-gap) );
	transition: opacity 0.125s 0.275s ease;
}

.greyd-burger--elastic .greyd-burger-inner::after {
	top: calc( 2 * ( var(--burger-stroke) + var(--burger-gap) ) );
	transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.greyd-burger--elastic.is-active .greyd-burger-inner {
	transform: translate3d(0, calc( var(--burger-stroke) + var(--burger-gap) ), 0) rotate(135deg);
	transition-delay: 0.075s;
}

.greyd-burger--elastic.is-active .greyd-burger-inner::before {
	transition-delay: 0s;
	opacity: 0;
}

.greyd-burger--elastic.is-active .greyd-burger-inner::after {
	transform: translate3d(0, calc( -2 * ( var(--burger-stroke) + var(--burger-gap) ) ), 0) rotate(-270deg);
	transition-delay: 0.075s;
}

/**
 * Spin
 */
.greyd-burger--spin .greyd-burger-inner {
	transition-duration: 0.22s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.greyd-burger--spin .greyd-burger-inner::before {
	transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}

.greyd-burger--spin .greyd-burger-inner::after {
	transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.greyd-burger--spin.is-active .greyd-burger-inner {
	transform: rotate(225deg);
	transition-delay: 0.12s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.greyd-burger--spin.is-active .greyd-burger-inner::before {
	top: 0;
	opacity: 0;
	transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}

.greyd-burger--spin.is-active .greyd-burger-inner::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/**
 * Spring
 */
.greyd-burger--spring .greyd-burger-inner {
	top: calc( var(--burger-stroke) / 2 );
	transition: background 0s 0.13s linear;
}

.greyd-burger--spring .greyd-burger-inner::before {
	top: calc( var(--burger-stroke) + var(--burger-gap) );
	transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.greyd-burger--spring .greyd-burger-inner::after {
	top: calc( 2 * ( var(--burger-stroke) + var(--burger-gap) ) );
	transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.greyd-burger--spring.is-active .greyd-burger-inner {
	transition-delay: 0.22s;
	background: transparent !important;
}

.greyd-burger--spring.is-active .greyd-burger-inner::before {
	top: 0;
	transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
	transform: translate3d(0, calc( var(--burger-stroke) + var(--burger-gap) ), 0) rotate(45deg);
}

.greyd-burger--spring.is-active .greyd-burger-inner::after {
	top: 0;
	transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
	transform: translate3d(0, calc( var(--burger-stroke) + var(--burger-gap) ), 0) rotate(-45deg);
}

/**
 * Squeeze
 */
.greyd-burger--squeeze .greyd-burger-inner {
	transition-duration: 0.075s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.greyd-burger--squeeze .greyd-burger-inner::before {
	transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}

.greyd-burger--squeeze .greyd-burger-inner::after {
	transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.greyd-burger--squeeze.is-active .greyd-burger-inner {
	transform: rotate(45deg);
	transition-delay: 0.12s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.greyd-burger--squeeze.is-active .greyd-burger-inner::before {
	top: 0;
	opacity: 0;
	transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}

.greyd-burger--squeeze.is-active .greyd-burger-inner::after {
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/**
 * Shape: E
 */
.greyd-burger.shape-e:not(.is-active) .greyd-burger-inner {
	width: calc( var(--burger-width) * 0.66 );
}

.greyd-burger.shape-e-reverse:not(.is-active) .greyd-burger-inner {
	width: calc( var(--burger-width) * 0.66 );
}

.greyd-burger.shape-e-reverse:not(.is-active) .greyd-burger-inner,
.greyd-burger.shape-e-reverse:not(.is-active) .greyd-burger-inner::before,
.greyd-burger.shape-e-reverse:not(.is-active) .greyd-burger-inner::after {
	right: 0;
}

/**
 * Shape: F
 */
.greyd-burger.shape-f:not(.is-active) .greyd-burger-inner::after {
	width: calc( var(--burger-width) * 0.5 );
}

.greyd-burger.shape-f-reverse:not(.is-active) .greyd-burger-inner::after {
	width: calc( var(--burger-width) * 0.5 );
	right: 0;
}

/**
 * Shape: Kebab
 */
.greyd-burger.shape-kebab:not(.is-active) .greyd-burger-inner::before,
.greyd-burger.shape-kebab:not(.is-active) .greyd-burger-inner::after {
	width: calc( var(--burger-width) * 0.6 );
	left: calc( var(--burger-width) * 0.2 );
}

/**
 * Shape: Equal
 */
.greyd-burger.shape-equal:not(.is-active) .greyd-burger-inner {
	background: transparent;
	transition-property: transform background;
}