@import url(~antd/lib/menu/style/index-pure.less);
@import '../../style/themes/index';
@import '../../style/mixins/index.less';

.@{menu-prefix-cls} {
	&-item-group-title {
		padding: @menu-item-padding;
		font-weight: 500;
	}

	&-item,
	&-submenu-title {
		letter-spacing: 0.4px;
		.@{menu-prefix-cls}-item-icon,
		.@{iconfont-css-prefix} {
			height: @menu-icon-size;
		}
	}
	&-title-content {
		display: inline-flex;
		align-items: center;
	}

	&-vertical,
	&-vertical-left,
	&-vertical-right,
	&-inline {
		border-right: none;

		.@{menu-prefix-cls}-item,
		.@{menu-prefix-cls}-submenu-title {
			height: @menu-submenu-height;
			line-height: @menu-submenu-height;
			font-size: @font-size-md;

			.@{menu-prefix-cls}-item-icon {
				line-height: 1;
			}
		}
		//二级的padding
		.@{menu-prefix-cls}-submenu {
			.@{menu-prefix-cls}-sub {
				.@{menu-prefix-cls}-item .@{menu-prefix-cls}-title-content {
					margin-left: @padding-xs;
				}
			}
			padding-bottom: 0;
		}

		.@{menu-prefix-cls}-item:not(:last-child) {
			margin-top: 0;
			margin-bottom: 0;
		}

		//driver样式
		.@{ant-prefix}-divider-horizontal {
			margin: 18px 0;
		}
	}

	// Inline样式
	&-inline {
		padding-top: 16px;
		padding-bottom: 16px;

		.@{menu-prefix-cls}-item,
		.@{menu-prefix-cls}-submenu-title {
			width: 100%;
		}

		.@{menu-prefix-cls}-item::after {
			right: unset;
			left: 0;
			border: none;
			width: @ink-bar-height;
			background: @menu-primary-inline-color;
			border-top-right-radius: calc(@ink-bar-height + 1px);
			border-bottom-right-radius: calc(@ink-bar-height + 1px);
		}
	}

	&-inline&-breathing &-item::after {
		background-size: 250% !important ;
		.gradient-breathing-animation();
	}

	&-root&-inline {
		box-shadow: 2px 0 4px 0 fade(@black, 10%);
	}

	&-item-disabled,
	&-submenu-disabled {
		background: transparent !important;
		color: @menu-item-color-disabled !important;

		a {
			color: @menu-item-color-disabled !important;
		}

		> .@{menu-prefix-cls}-submenu-title {
			color: @menu-item-color-disabled !important;
			background: transparent !important;
		}
	}

	&-submenu {
		.@{menu-prefix-cls}-submenu-expand-icon {
			transition: opacity @animation-duration-slow ease;
			line-height: 1;
			vertical-align: middle;
		}

		&:hover > &-title > &-expand-icon,
		&:hover > &-title > &-arrow {
			color: @menu-item-color;
		}

		&&-disabled:hover > &-title > &-expand-icon,
		&&-disabled:hover > &-title > &-arrow {
			color: @menu-item-color-disabled;
		}

		&-inline&-open {
			.@{menu-prefix-cls}-submenu-expand-icon-arrow {
				transform-origin: center 20%;
				transform: rotateX(180deg);
			}
		}

		&-selected {
			.@{menu-prefix-cls}-submenu-expand-icon {
				color: @menu-item-color;
			}
		}
	}

	&-sub&-vertical {
		padding-top: 10px;
		padding-bottom: 10px;

		.@{menu-prefix-cls}-item {
			padding-left: 16px !important;
		}
	}

	&&-inline-collapsed {
		> .@{menu-prefix-cls}-item,
		> .@{menu-prefix-cls}-item-group > .@{menu-prefix-cls}-item-group-list > .@{menu-prefix-cls}-item,
		> .@{menu-prefix-cls}-item-group
			> .@{menu-prefix-cls}-item-group-list
			> .@{menu-prefix-cls}-submenu
			> .@{menu-prefix-cls}-submenu-title,
		> .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
			padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)' !important;

			.@{menu-prefix-cls}-item-icon {
				font-size: @menu-icon-size-lg;

				line-height: @layout-height-6;
			}
		}

		.@{menu-prefix-cls}-submenu-expand-icon-arrow {
			opacity: 0;
		}

		// 选中的item或subMenu背景色 vertical ink bar
		&.@{menu-prefix-cls}-vertical .@{menu-prefix-cls}-submenu-selected {
			background: @menu-light-bg-hover-color;

			.@{menu-prefix-cls}-submenu-title:hover {
				color: @primary-color;
			}

			.@{menu-prefix-cls}-submenu-title::after {
				content: '';
				position: absolute;
				left: 0;
				border: none;
				width: 3px;
				height: 100%;
				background: @menu-primary-inline-color;
				border-top-right-radius: calc(@ink-bar-height + 1px);
				border-bottom-right-radius: calc(@ink-bar-height + 1px);
			}
		}
	}
}

// 水平方向下拉submenu的调整
.@{menu-prefix-cls}-submenu-popup {
	.@{menu-prefix-cls}-vertical {
		& > .@{menu-prefix-cls}-item,
		& > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
			height: @layout-height-5;
			line-height: @layout-height-5;
		}
		.@{menu-prefix-cls}-item-selected {
			background-color: @component-background-selected;
		}
	}
}
@keyframes menu-radial-animation {
	0% {
		background-position: 30% 10%;
	}

	50% {
		background-position: 30% 16%;
		filter: saturate(1.8);
	}

	100% {
		background-position: 80% 0%;
	}
}
// Menu style when contained in Layout.
.@{ant-prefix}-layout {
	.@{menu-prefix-cls}-root.@{menu-prefix-cls}-inline {
		box-shadow: none;
	}

	.@{ant-prefix}-layout-sider {
		box-shadow: 2px 0 4px 0 fade(@black, 10%);
		&[type='primary'] {
			background: @gradient-menu-vertical;
			&::before {
				content: '';
				display: block;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: radial-gradient(circle, @primary-40, transparent, transparent);
				background-size: 250% 250%;
			}

			.@{menu-prefix-cls}-primary {
				background: transparent;
				&:before {
					content: unset;
				}
			}

			&.@{ant-prefix}-layout-sider-breathing {
				background-size: 200% 200% !important;
				animation: menu-vertial-animation 6.5s alternate infinite;
				&:before {
					animation: menu-radial-animation 6.5s alternate infinite;
				}
			}
		}
	}

	.@{ant-prefix}-layout-sider-has-trigger {
		padding-bottom: 56px;
	}

	.@{ant-prefix}-layout-sider-trigger {
		box-sizing: unset;
		position: sticky;
		height: 56px;
		width: 100%;
		background: transparent !important;
	}
}

@import './horizontal.less';
@import './light.less';
@import './dark.less';
@import './primary.less';