@import './globals.scss';

// Default right direction
.MenuHoverY{

    .root{
        box-sizing: border-box;
        padding: 5px 10px;
        display: flex;
        flex-direction: column;
        width: inherit;

        ol, ul{
            box-sizing: border-box;
            padding: 5px 10px;
        }
    }

    .has-children{
        position: relative;
    }

    .child{
        position: absolute;
        z-index: 10;
    }

    .menu-entry{
        list-style: none;
        display: block;
        white-space: nowrap;
        margin: 5px 0;

        ol, ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: none;
        }
    }

    .child ul,
    .child ol{
        padding-left: 10px;
    }

    .menu-entry:hover > ul,
    .menu-entry:hover > ol{
        display: block;
    }

    .root li ol{
        top: -5px;
        left: 100%;
        padding-left: 10px;
    }

    .root li ol li ul,
    .root li ol li ol{
        top: -5px;
        left: 100%;
    }

    .text{
        display: block;
        box-sizing: border-box;
        padding: 5px 10px;
    }

    .text:hover{
        cursor: pointer;
    }
}

// Direction left
.MenuHoverY.left{

    .root{
        box-sizing: border-box;
        padding: 5px 10px;
        display: inline-block;
    }

    .menu-entry{
        display: inline-block;
    }

    .root li ol{
        top: -5px;
        left: auto;
        right: 100%;
        padding-left: 0px;
        padding-right: 10px;
    }
    
    .root li ol li ul,
    .root li ol li ol{
        top: -5px;
        left: auto;
        right: 100%;
    }

    .menu-entry:hover > ul,
    .menu-entry:hover > ol{
        display: flex;
        flex-direction: column;
    }

    .child ul,
    .child ol{
        padding-left: inherit;
        padding-right: 10px;
    }
}