$checkbox-prefix-cls: $prefix-name + "checkbox";

.#{$checkbox-prefix-cls} {
    cursor: pointer;
    user-select: none;
    color: $textColor;
    font-size: $fontSize;
    display: inline-flex;
    align-items: center;

    &-checked {
        .#{$checkbox-prefix-cls} {
            &-inner {
                border-color: $primaryColor;
                background-color: $primaryColor;

                &::after {
                    content: "";
                    width: 4px;
                    height: 8px;
                    position: absolute;
                    top: 2px;
                    left: 5px;
                    border: 1px solid #fff;
                    border-top: 0;
                    border-left: 0;
                    transform: rotate(45deg) scale(1); 
                }
            }

        }
    }

    &-indeterminate {
        .#{$checkbox-prefix-cls} {
            &-inner {
                border-color: $primaryColor;
                background-color: $primaryColor;
                &::after {
                    content: none;
                }

                &::before {
                    content: "";
                    width: 8px;
                    height: 1px;
                    position: absolute;  
                    inset: 0;
                    margin: auto;
                    background: white; 
                }
            }

        }
    }

    &-inner {
        width: 16px;
        height: 16px;
        border-radius: 2px;
        background-color: #fff;
        position: relative;
        border: 1px solid $borderColor;


    }

    &-label {
        margin-left: 4px;
    }
}