/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

@mixin all-ul-default-style {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 0;
}

@mixin transition( $property: transform, $duration: .3s, $effect: linear ) {
	-o-transition: $property $duration $effect;
	-moz-transition: $property $duration $effect;
	-webkit-transition: $property $duration $effect;
	-ms-transition: $property $duration $effect;
}

@mixin wpbean-vertical-menu-color {
	color: #1f2937!important;
}

@mixin wpbean-vertical-menu-hover-bg {
	background-color: rgb(31 41 55 / 10%)!important;
}

@mixin wpbean-vertical-menu-parent-colors {
	color: var(--wpbean-vsm-parent-color, #1f2937)!important;
	background: var(--wpbean-vsm-parent-background);

	&:hover, &:focus {
		color: var(--wpbean-vsm-parent-hover-color, #1f2937)!important;
		background: var(--wpbean-vsm-parent-hover-background, rgba(31, 41, 55, 0.1))!important;
	}
}

@mixin wpbean-vertical-menu-child-colors {
	color: var(--wpbean-vsm-child-color, #1f2937)!important;
	background: var(--wpbean-vsm-child-background);

	&:hover, &:focus {
		color: var(--wpbean-vsm-child-hover-color, #1f2937)!important;
		background: var(--wpbean-vsm-child-hover-background, rgba(31, 41, 55, 0.1))!important;
	}
}

@mixin wpbean-vertical-menu-current-colors {
	color: var(--wpbean-vsm-current-color, #D7DDE4)!important;
	background-color: var(--wpbean-vsm-current-background, #2C3440)!important;

	&:hover, &:focus {
		color: var(--wpbean-vsm-current-hover-color)!important;
		background-color: var(--wpbean-vsm-current-hover-background)!important;
	}
}

@mixin wpbean-vertical-menu-item-spacing( $top, $right, $bottom, $left ){
	padding-top: $top;
	padding-right: $right;
	padding-bottom: $bottom;
	padding-left: $left;
}

.entry-content {
	.wp-block-wpbean-vertical-sidebar-menu-block {
		ul {
			list-style: none;
   			margin-bottom: 0;
		}
	}
}
.wp-block-wpbean-vertical-sidebar-menu-block {
	&.wpbean-vertical-menu-has-child-border {
		> nav {
			> ul {
				ul::before {
					position: absolute;
					bottom: .75rem;
					inset-inline-start: 0px;
					top: .75rem;
					width: calc(var(--wpbean-vsm-child-border-width, 1) * 1px);
					background-color: var(--wpbean-vsm-child-border-color, rgb(31 41 55 / 10%));
					content: "";
				}
			}
		}
	}
	> nav {
		> ul {
			@include all-ul-default-style;

			ul {
				@include all-ul-default-style;
				display: none;
				position: relative;
				white-space: nowrap;
				margin-inline-start: 1rem;
				padding-inline-start: .5rem;
				
				&.wpb-submenu-opened {
					display: flex;
				}
				li > a {
					font-size: var(--wpbean-vsm-child-font-size, 14px);
					font-weight: var(--wpbean-vsm-child-font-weight, 500);
					line-height: var(--wpbean-vsm-child-line-height, 20px);
					
					@include wpbean-vertical-menu-child-colors;
					@include wpbean-vertical-menu-item-spacing( 
						var(--wpbean-vsm-child-spacing-top, 0.5rem),
						var(--wpbean-vsm-child-spacing-right, 1rem),
						var(--wpbean-vsm-child-spacing-bottom, 0.5rem),
						var(--wpbean-vsm-child-spacing-left, 1rem)
					);
				} 
			}
			li {
				list-style: none;
				margin: 0;
				margin-top: calc(var(--wpbean-vsm-item-spacing, 0) * 1px);
				a {
					display: grid;
					grid-auto-flow: column;
					align-content: flex-start;
					align-items: center;
					gap: .5rem;
					grid-auto-columns: minmax(auto, max-content) auto max-content;
					-webkit-user-select: none;
					user-select: none;
					padding: .5rem 1rem;
					text-decoration: none;
					@include transition( all );
					outline: 0;
					line-height: 24px;
					border-radius: calc(var(--wpbean-vsm-border-radius, 6) * 1px);
					text-wrap: balance;
					@include wpbean-vertical-menu-color;

					&:hover, &:focus {
						@include wpbean-vertical-menu-color;
						@include wpbean-vertical-menu-hover-bg;
					}
				}

				&.menu-item-has-children {
					> a {
						
						.menu-expand-icon {
							display: inline-flex;
							align-items: center;
							justify-self: end;
							font-size: var(--wpbean-vsm-collapse-font-size, 17px);
							font-weight: var(--wpbean-vsm-collapse-font-weight, 400);
							line-height: var(--wpbean-vsm-collapse-line-height, 1);
							width: unset;
							height: unset;
							
							&::before {
								transform: rotate(0deg);
								@include transition;
							}
						}
					}
		
					&.wpb-submenu-opened > a {

						.menu-expand-icon {
							&::before {
								transform: rotate(45deg);
							}

							&.dashicons-arrow-right-alt2::before, &.dashicons-arrow-right::before, &.dashicons-arrow-right-alt::before {
								transform: rotate(90deg);
							}
						}
					}
				}

				&.current-menu-item, &.wpb-submenu-opened.current-menu-item {
					> a {
						@include wpbean-vertical-menu-current-colors;
					}
				}

				&.menu-item {
					i._mi,
					i.wpmi__icon {
						margin: 0;
						line-height: inherit;
						display: inherit;
					}
				}
			}
			> li{
				&:first-child{
					margin-top: 0;
				}
				&.wpb-submenu-opened {
					> a {
						color: var(--wpbean-vsm-parent-hover-color, #1f2937)!important;
						background: var(--wpbean-vsm-parent-hover-background, rgba(31, 41, 55, 0.1))!important;
					}
				}
				> a {
					font-size: var(--wpbean-vsm-font-size, 14px);
					font-weight: var(--wpbean-vsm-font-weight, 500);
					line-height: var(--wpbean-vsm-line-height, 1.5);
					@include wpbean-vertical-menu-parent-colors;
					@include wpbean-vertical-menu-item-spacing( 
						var(--wpbean-vsm-parent-spacing-top, 0.5rem),
						var(--wpbean-vsm-parent-spacing-right, 1rem),
						var(--wpbean-vsm-parent-spacing-bottom, 0.5rem),
						var(--wpbean-vsm-parent-spacing-left, 1rem)
					);
				}
				> ul {
					li {
						&.wpb-submenu-opened {
							> a {
								color: var(--wpbean-vsm-child-hover-color, #1f2937)!important;
								background: var(--wpbean-vsm-child-hover-background, rgba(31, 41, 55, 0.1))!important;
							}
						}
					}
				}
			}
		}
	}
}