@import '../../less/palette';
@import '../../less/palette-brand-@{theme}';

.checkbox {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    position: relative;

    border: 2px solid @color-border;
    box-sizing: border-box;
    cursor: pointer;

    transition: border 0.15s, background 0.15s;

    &:after {
        content: '';
        position: absolute;
        width: 4px;
        height: 16px;

        top: 50%;
        left: 50%;
        transform-origin: bottom center;
        transform: rotate(36deg);
        border-radius: 2px;
        margin-top: -10px;
        margin-left: -4px;
        background: #fff;
    }

    &:before {
        content: '';
        position: absolute;
        width: 10px;
        height: 4px;

        top: 50%;
        left: 50%;
        transform-origin: center right;
        transform: rotate(36deg);
        border-radius: 2px;
        margin-top: 4px;
        margin-left: -10px;
        background: #fff;
    }

    &.active {
        border-color: @color-brand;
        background: @color-brand;
    }
}
