$checkboxHeight: .5rem;
label.component-checkbox {
    display: flex;
    align-items: center;
    overflow: hidden;
    .title {
        flex: 1;
        text-align: justify;
        &.reverse {
            order: 1;
            padding-left: $gutter*2;
        }
    }
    >input {
        display: none;
        opacity: 0; // 未选中
        +.appearance {
            border: 1px solid $light;
            width: $checkboxHeight;
            height: $checkboxHeight;
            background: $sub;
            border-radius: $borderRadius;
            display: flex;
            &:after {
                content: ' ';
                height: .25*$checkboxHeight;
                width: .5*$checkboxHeight;
                margin: .26*$checkboxHeight auto;
                border-style: solid;
                border-color: $sub;
                border-width: 0 0 2px 2px;
                display: block;
                overflow: hidden;
                transform: rotate(-45deg);
            }
        }
        &:disabled+.appearance {
            border-color: $light;
            background: $lightest;
            &:after {
                border-color: $lightest;
            }
        } // 选中
        &:checked {
            &+.appearance {
                border-color: $base;
                &:after {
                    border-color: $base;
                    animation: zoom-in .5s;
                }
            }
            &:disabled+.appearance {
                border-color: $light;
                background: $lighter;
                &:after {
                    border-color: $sub;
                }
            }
        }
    }
}

@keyframes zoom-in {
    0% {
        opacity: 0;
        transform: scale(.8) rotate(-45deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(-45deg);
    }
}