@use 'sass:math';

@use "../../00-base/colors/colors" as dt;
@use "../../00-base/mixin/core.mixin" as core;

.hoo-navitem-text {
	font-size: core.px2rem(14px);

	display: flex;
	flex-direction: row;

	align-content: baseline;
	flex-wrap: wrap;

	.hoo-buttonicon {
		display: inline;

		width: core.px2rem(26px);
		height: core.px2rem(44px);
		margin-left: calc(12px + var(--subnav-margin-left,0px));
		margin-left: var(--subnav-margin-left,0px);

		svg {
			width: 12px;
			height: 12px;
		}

		&~.hoo-navitem-link {
			// width: calc(100% - {#{ core.px2rem(26px) }});
			width: calc(100% - #{ core.px2rem(40px) } - var(--subnav-margin-left,0px));
			padding-left: 0;
			
		}
	}

	&:hover {
		background-color: dt.$neutral-100;
	}
}

.hoo-nav-list {
	.hoo-navitem-link {
		padding-right: core.px2rem(20px);
		padding-left: core.px2rem(27px);
	}
}

.hoo-navitem {
	box-sizing: border-box;
	border-left: 2px dt.$neutral-100 solid;

	&[aria-expanded="true"] {
		> .hoo-navitem-text > .hoo-buttonicon {
			svg {
				transform: rotate(90deg);
			}
		}

		.hoo-nav-listsub {
			display: block;
		}
	}

	&[aria-expanded="false"] {
		.hoo-nav-listsub {
			display: none;
		}
	}

	&[aria-current] {

		// border-left: 2px dt.$theme-500 solid;
		// .hoo-buttonicon{
		// 	padding-left: core.px2rem(2px);
		// }
		// .hoo-navitem-link{
		// 	padding-left: core.px2rem(25px);
		// }
		border-color: dt.$theme-500;

		& > .hoo-navitem-text {
			background-color: dt.$neutral-100;
		}

		&:has(.hoo-nav-listsub) {
			border-color: transparent;

			&>.hoo-navitem-text {
				border-left: 2px dt.$theme-500 solid;
				margin-left: -2px;
			}
		}

		&:not(:has(.hoo-nav-listsub)) {
			&>.hoo-navitem-text {
				// border-left: 2px transparent solid;
				margin-left: 0;
			}

			&>.hoo-navitem-link {
				padding-left: core.px2rem(39px);
			}
		}

	}

	* .hoo-navitem {
		margin-left: -2px;
	}
}

.hoo-navitem-link {
	display: block;
	width: 100%;

	box-sizing: border-box;
	padding-top: core.px2rem(math.div(44px - 17px, 2));
	padding-bottom: core.px2rem(math.div(44px - 17px, 2));

	text-decoration: none;

	color: dt.$neutral-600;

	&:visited {
		color: dt.$neutral-600;
	}

	&:hover {
		color: dt.$theme-600;

		:visited {
			color: dt.$theme-600;
		}
	}
}

.hoo-nav {
	border: 1px solid dt.$neutral-450;
}

.hoo-nav-list,
.hoo-nav-listsub {
	display: block;

	margin: 0;
	padding: 0;

	list-style: none;
}

.hoo-nav-listsub {
	width: 100%;

	--subnav-margin-left: #{core.px2rem(18px)};
	--subnav-padding-left: #{core.px2rem(28px)};
	--subnav-padding-right: #{core.px2rem(20px)};

	.hoo-navitem {
		width: 100%;
	}

	.hoo-navitem-link {

		display: block;

		width: 100%;
		padding-right: var(--subnav-padding-right);
		padding-left: var(--subnav-padding-left);
	}

	.hoo-nav-listsub{
		--subnav-margin-left: #{core.px2rem(36px)};
		--subnav-padding-left: #{core.px2rem(46px)};
		--subnav-padding-right: #{core.px2rem(40px)};

		.hoo-nav-listsub{
			--subnav-margin-left: #{core.px2rem(54px)};
			--subnav-padding-left: #{core.px2rem(64px)};
			--subnav-padding-right: #{core.px2rem(60px)};
			
			.hoo-nav-listsub{
				--subnav-margin-left: #{core.px2rem(66px)};
				--subnav-padding-left: #{core.px2rem(80px)};
				--subnav-padding-right: #{core.px2rem(80px)};
				
			}
		}
	}

}