//  add mixins
@import "mixins";

.ast-below-header-menu {
	
	.sub-menu {
		line-height: 1.45;
	}

	a {
		text-decoration: none;
		padding: 0 1em;
		display: inline-block;
		@include ast-transition();
	}

	li {
		position: relative;

		&:hover > ul,
		&.focus > ul {
			left: 0;
			right: auto;
		}

		@media (min-width: $col-md) {
			&.ast-sub-menu-goes-outside:hover > ul,
			&.ast-sub-menu-goes-outside.focus > ul {
			    left: -100%;
			}
		}
	}

	/** Fixed submenu dropdown position */
	ul ul {
		top: 0;
	}
	&.submenu-with-border ul ul{
        top: -1px;
    }

	ul {
		width: 240px;
		background: $color-background-header-submenu;
		left: -999em;
		position: absolute;
		top: 100%;
		z-index: 99999;

		@media (min-width: $col-md) {
			li {
				&:hover > ul,
				&.focus > ul {
					left: 100%;
					right: auto;
				}

				&.ast-left-align-sub-menu:hover > ul,
				&.ast-left-align-sub-menu.focus > ul {
					left: -100%;
				}
			}
		}


		a {
			padding: 0.9em 1em;
			display: block;
			word-wrap: break-word;
		}

		li.menu-item-has-children > a:after {
			position: absolute;
			right: 1em;
			top: 50%;
			transform: translate(0, -50%) rotate(270deg);
		}
	}
}

.ast-below-header-actual-nav {
	ul {
		list-style: none;
		margin: 0;
		padding-left: 0;
	}
}


.ast-below-header {
	#ast-search-form.header-cover .search-field {
		font-size: 1.7em;
	}
}

.ast-header-break-point {

	.ast-button-wrap .menu-below-header-toggle.toggled .menu-toggle-icon:before{
        content: "\e5cd";
    }
    
    .ast-below-header {
		
		line-height: 3;
		padding: 1em 0;

		.ast-search-icon {
			display: none;
		}
    }

    
    .ast-below-header-actual-nav,
    .ast-below-header-menu-items {
        ul {
            li a {
                padding: 0 20px;
                display: inline-block;
                width: 100%;
                border-bottom-width: 1px;
                border-style: solid;
                border-color: #dadada;
            }
			&.sub-menu li a {
			    padding-left: 30px;
			    &:before{
			    	content: "\e900";
                    font-family: 'Astra';
                    font-size: .65em;
                    text-decoration: inherit;
                    display: inline-block;
                    transform: translate(0, -2px) rotateZ(270deg);
                    margin-right: 5px;
			    }
			}
			&.sub-menu li li a {
			    padding-left: 40px;
			}
			&.sub-menu li li li a {
			    padding-left: 50px;
			}
			&.sub-menu li li li li a {
			    padding-left: 60px;
			}	

            > li:first-child {
                border-top: 0;
            }

            ul {
                left: auto;
                right: auto;
            }
        }

        li {
            width: 100%;
        }

        .menu-item-has-children {
            
            .sub-menu {
                display: none;
            }

            > .ast-menu-toggle {

                display: inline-block;
                position: absolute;
                right: 20px;
                cursor: pointer;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                padding: 0 0.907em;
                font-size: inherit;
                font-weight: normal;
			    line-height: inherit;

                &::before {
                    content: "\e900";
                    font-family: 'Astra';
                    text-decoration: inherit;
                    display: inline-block;
                }
            }
        }
        .ast-submenu-expanded {
            >.ast-menu-toggle::before {
               transform: rotateX(180deg);
            }
        }
    }

    .ast-below-header-menu {

    	.sub-menu {
			line-height: 3;
		}

		ul {
			position: relative;
			opacity: 1;
			visibility: visible;
			border: 0;
			width: auto;

			a {
				border: 0;
			}
			li {

				&.ast-left-align-sub-menu:hover > ul,
				&.ast-left-align-sub-menu.focus > ul {
				    left: auto;
				}
			}
		}
		li {

			&.ast-sub-menu-goes-outside:hover > ul,
			&.ast-sub-menu-goes-outside.focus > ul {
			    left: auto;
			}
		}
	}       
}

.ast-fullscreen-below-menu-enable {
    &.ast-header-break-point {
        .ast-below-header-navigation,
        .ast-below-header-menu-items {
	            ul {   
	            &.sub-menu li a {
	                padding-left: 0;
	            }
	            &.sub-menu li li a {
	                padding-left: 0;
	            }
	            &.sub-menu li li li a {
	                padding-left: 0;
	            }
	            &.sub-menu li li li li a {
	                padding-left: 0;
	            }
	        }
	    }  
	}
}