@charset 'utf-8';
@use '../global' as *;

/* hamburger
--------------------------------------------- */
// 変数
$hmenu-icon__bar__thick: 1px;
$hmenu-icon__bar__width: var(--hamburger-bar-size, 1em);

$hmenu-icon__bar__position-middle: 6px;
$hmenu-icon__bar__position-last: 12px;

// barのデザイン
%bar {
	display: block;
	transition-duration: .2s;
	transition-timing-function: var(--transition-timing);
	width: var(--hamburger-bar-size, 1em);
	height: $hmenu-icon__bar__thick;
	background-color: var(--hamburger-color, var(--ap-color-text, #333));
	content: '';
}


.hamburger {
	display: inline-block;
	height: $hmenu-icon__bar__thick + $hmenu-icon__bar__position-last;
	vertical-align: middle;
	&__bar {
		@extend %bar;
		position: relative;
		transition-property: transform;
		&:before,
		&:after {
			position: absolute;
			@extend %bar;
		}

		&:before {
			top: $hmenu-icon__bar__position-middle;
			transition-property: opacity,transform;
		}

		&:after {
			top: $hmenu-icon__bar__position-last;
			transition-property: transform;
		}
	}
}



[data-state=active], .is-active {
	.hamburger {
		height: calc(var(--hamburger-bar-size, 1em)/1.41421);
	}
	.hamburger__bar {
		transform: translate3d(0, $hmenu-icon__bar__position-middle, 0) rotate(45deg);
		// 中bar
		&::before {
			transform: rotate(-45deg) translate3d(-5.71429px,-6px,0);
			opacity: 0;
		}
		// 下bar
		&::after {
			transform: translate3d(0, -$hmenu-icon__bar__position-last, 0) rotate(-90deg);
		}
	}
}