@import (reference) "@{barcelonetaPath}/less/variables.plone.less";

.plone-nav ul {
    box-shadow: 2px 2px 6px rgba(0,0,0,.2);
    min-width: 12em;
}
.plone-nav a {
    background-color: @plone-sitenav-bg;
    color: white;
    padding: 0.75em 1em;

    &:hover, &:focus {
        background-color: @plone-sitenav-link-hover-bg;
    }
}

/* animated burgerbar */
.plone-navbar-toggle {
    height:37px;
    width:40px;

    .icon-bar {
        display: block;
        position:absolute;
        width: 18px;
        border:solid 1px white;
        background: white;
        margin: 5px auto;
        height:0;
        transition: all 0.2s ease-in-out;

        &:after {
            content: "" !important;
        }
        &:nth-child(2) {
            top: 12px;
            transform: rotate(45deg) ;
        }
        &:nth-child(3) {
            top: 12px;
            opacity: 0;
        }
        &:nth-child(4) {
            top:12px;
            transform: rotate(-45deg)  ;
        }
    }

    &.collapsed .icon-bar {
        &:nth-child(2) {
            top:5px;
            transform: rotate(0) ;
        }
        &:nth-child(3) {
            opacity: 1;
        }
        &:nth-child(4) {
            top:19px;
            transform: rotate(0)  ;
        }
    }
}
