@import "colors";

vn-drop-down {
    .dropdown {
        display: flex;
        flex-direction: column;

        & > .filter {
            position: relative;

            & > .search {
                display: block;
                width: 100%;
                box-sizing: border-box;
                border: none;
                border-bottom: 1px solid #ccc;
                font-size: inherit;
                padding: .6em;
            }
            & > vn-icon[icon=clear] {
                display: none;
                cursor: pointer;
                position: absolute;
                right: .5em;
                top: .6em;
                height: 1em;
                color: #888;
                border-radius: 50%;
                background-color: rgba(255, 255, 255, .8);
                font-size: 18px; 
        
                &:hover {
                    color: $main-font-color;
                }
            }
            &:hover > vn-icon[icon=clear] {
                display: block;
            }
        }
        & > .list {
            max-height: 12.8em;
            overflow: auto;

            ul {
                padding: 0;
                margin: 0;
                list-style-type: none;
            }
            li, .status {
                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: $main-01;
                font-weight: bold;
            }
        }
    }
}