.root {
    zoom: document;
    ul {
        li {
            display: inline-block;
            background-color: rgba(255,255,255,0.5);
            padding:10px 14px;
            cursor: pointer;
            transition : all 200ms ease-in-out;
            i {
                color: white;
                font-size: 1em;
            }
            &.active {
                background-color: white;
                i {
                    color: grey;
                }
            }
            &:hover {
                background-color: rgba(255,255,255,0.7);
            }
        }
    }
}

.horizontal {
    margin-top: 15px;
    ul {
        li {
            padding: 5px 7px;
            display: block;
            width: 18px;
            &:nth-child(1) {
                padding-top: 7px;
                border-radius: 5px 5px 0 0;
            }
            &:nth-last-child(1) {
                padding-bottom: 7px;
                border-radius: 0 0 5px 5px;
            }
        }
    }
}

.vertical {
    ul {
        li {
            width: 18px;
            &:nth-child(1) {
                border-radius: 5px 0 0 5px;
            }
            &:nth-last-child(1) {
                border-radius: 0 5px 5px 0;
            }
        }
    }
}