vn-drop-down {
    z-index: 10;
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    &.shown {
        & > .body {
            transform: translateY(0);
            opacity: 1;
        }
    }
    & > .body {
        position: fixed;
        box-shadow: 0 .1em .4em rgba(1, 1, 1, .4);
        border-radius: .1em;
        background-color: white;
        display: flex;
        flex-direction: column;
        transform: translateY(-.4em);
        opacity: 0;
        transition-property: opacity, transform;
        transition-duration: 250ms;
        transition-timing-function: ease-in-out;

        & > .filter {
            position: relative;
            padding: .4em;

            & > .search {
                height: 26px;
                display: block;
                width: 100%;
                box-sizing: border-box;
            }
            & > vn-icon[icon=clear] {
                display: none;
                cursor: pointer;
                position: absolute;
                right: .6em;
                top: .8em;
                height: 1em;
                color: #888;
                border-radius: .2em;
                background-color: rgba(255, 255, 255, .8);
                font-size: 18px; 
        
                &:hover {
                    color: #333;
                }
            }
            &:hover > vn-icon[icon=clear] {
                display: block;
            }
        }
        & > .list {
            max-height: 12.2em;
            overflow: auto;

            ul {
                padding: 0;
                margin: 0;
            }
            li, .status {
                outline: none;
                list-style-type: none;
                padding: .6em;
                cursor: pointer;
                white-space: nowrap;
                transition: background-color 250ms ease-out;
                display: flex;

                & > input[type=checkbox] {
                    margin: 0;
                    margin-right: .6em;
                }
                &:hover {
                    background-color: rgba(0, 0, 0, .1);
                }
                &.active {
                    background-color: #3D3A3B;
                    color: white;
                }
            }
            .status {
                color: rgb(255,171,64);
                font-weight: bold;
            }
        }
    }
}