.rsuite-CheckListPicker {
    /* settings */
    @container-border: 1px solid #CCC;
    @check-list-hover-bg: @H050;
    @check-box-size: 17px;
    @check-box-fg: @H500;

    .checkItem {
        position: relative;
        padding: 6px 10px;
        cursor: pointer;
        .item-transition;

        &:hover {
            background-color: @check-list-hover-bg;
            color: #575757;
        }
        &.disabled {
            .checkItem-label {
                &::before{
                    background: #eee;
                }
            }
        }

        &.checked {
            .checkItem-label::after {
                .opacity(1);
                transform: scale(1);
            }
        }

        .checkItem-checkbox {
            position: absolute;
            z-index: -1;
        }

        .checkItem-label {
            display: block;
            position: relative;
            margin-bottom: 0;
            padding-left: 2em;
            outline: 0;
            cursor: pointer;
            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: @check-box-size;
                height: @check-box-size;
                background: #FFF;
                border: @container-border;
            }

            &::after {
                font-family: RSuiteIconFont;
                content: "\f00c";
                color: @check-box-fg;
                position: absolute;
                top: 0;
                left: 0;
                width: @check-box-size;
                height: @check-box-size;
                text-align: center;
                .opacity(0);
                transform: scale(0);
                transition: all .3s linear, transform .2s cubic-bezier(0, 0, 0.2, 1);
            }
        }
    }

    .btnClear {
        padding: 6px 10px;
        display: block;
        cursor: pointer;
    }
    hr {
        margin-bottom: 16px;
        margin-top: 0;
    }

}