& {
    white-space: nowrap;
    outline: none;
}

&>div.lack+div.more {
    width: 100%;
}

&>div>div,
&>div>div>div {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    background: transparent;
}

&>.more {
    position: absolute;
    right: 0;
    width: 40px;
    height: 100%;
    color: #fff;
    background: transparent;
    border-right: 1px solid #18333c;

    &::after {
        content: "";
        position: absolute;
        display: block;
        @size : 8px;
        width: @size;
        height: @size;
        right: 20px;
        top: 50%;
        margin: -@size/2;
        box-sizing: border-box;
        border-top: 2px solid;
        border-bottom: 2px solid;
    }
}

body:active & {

    // 仅在拖动过程中使用动画
    >.lattice {
        >div>div {
            @time : .1s;
            transition: margin @time;
        }
    }
}

&>.lattice {
    right: 40px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: auto;

    >div+div {
        display: none;
    }

    &.complete {
        right: 0;
    }

    &.lack {
        >div {
            opacity: 0;
        }
    }
}

&>.complete+.more {
    display: none;
}

&>.lack+.more {
    width: 100%;
}

&[vertical] {
    display: block;
}

&[horizonal] {
    display: block;
    overflow: hidden;
    text-overflow: hidden;
    position: relative;
    border-bottom: 1px solid #18333c;
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 0;

    menu-item {
        line-height: 24px;
        display: inline-block;
        
        &.has-children:after {
            content: "﹀";
            padding-top: .3em;
        }
    }

    >div {
        vertical-align: top;
    }

}

&[toolbar] {
    >menu-item {
        padding-left: 6px;
        padding-right: 6px;
        text-align: center;
    }

    >menu-item.has-children {
        &::after {
            display: block;
            content: "";
            width: 0;
            height: 0;
            font-size: 0;
            transform: none;
            border: 2px solid;
            border-top-color: transparent;
            border-left-color: transparent;
            position: absolute;
            right: 3px;
            bottom: 3px;
            box-sizing: border-box;
            line-height: 0;
            top: auto;
            margin: 0;
        }
    }
}

&[inline] {
    height: auto;
    box-shadow: none;
    padding: 0;

    >.button {
        box-shadow: none;
        padding-top: 6px;
        padding-bottom: 6px;
        line-height: 20px;
        font-size: 14px;
        border-radius: 0;

        /*
狗物业弄了电子门禁还嫌不够，连人行道也弄个一人一杆。
住在这里就像住在监狱，随时都可能被限制人身自由。
狗日的共产党还和狗物业尿到一个壶里。
*/
        >b {
            font-weight: normal;
        }

        &:not(.tab1) {
            display: block;
            background: #2c3b41;
            color: #8aa4af;

            &.checked,
            &.actived,
            &.selected {
                color: #fff;
            }
        }


        &.hover {
            text-shadow: none;
            // color: #fff;
        }

    }

    >.tab1 {
        font-size: 16px;
        line-height: 28px;

        &.open {
            background: #1e282c;

            & s:after {
                top: -9.2px;
            }
        }

        &.checked,
        &.actived,
        &.selected {
            color: #fff;
            border-left-color: #3c8dbc;
        }

        & s {
            display: block;
            height: 5px;
            width: 20px;
            right: 10px;
            position: absolute;
            overflow: hidden;
            top: 50%;
            margin-top: -2.5px;
            text-decoration: none;
        }

        & s:after {
            content: "×";
            box-sizing: border-box;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            line-height: 20px;
            height: 20px;
            padding: 0;
            font-weight: normal;
            text-align: center;
            display: block;
            text-align: start;
            position: absolute;
            right: 0;
            left: 0;
            color: #fff;
            transition: top .2s ease-out;
        }

        &.closed s:after {
            top: -5px;
        }

        &.empty s {
            display: none;
        }

        border-left: 3px solid transparent;
        display : block;
        font-size : 14px;
        color : #b8c7ce;
    }

    >[line],
    >.line {
        line-height: 0;
        font-size: 0;
    }
}