.app-checkboxset {
    .app-checkbox {
        position: relative;

        input[type="checkbox"] {
            appearance: none;
            margin: 0 8px 0 0;
            cursor: pointer;
            transition: all 0.2s ease;
    
            // root box
            & {
                width: var(--wm-checkboxset-width);
                height: var(--wm-checkboxset-height);
                background-color: var(--wm-checkboxset-background-color);
                border: var(--wm-checkboxset-border-width) solid var(--wm-checkboxset-border-color);
                border-radius: var(--wm-checkboxset-border-radius);
                display: flex;
                align-items: center;
                justify-content: center;
            }
    
            // checked state
            &:checked {
                background-color: var(--wm-checkboxset-background-color);
                border-color: var(--wm-checkboxset-border-color);
    
                &::after {
                    content: "";
                    display: block;
                    width: calc(var(--wm-checkboxset-icon-size)/3);
                    height: calc(var(--wm-checkboxset-icon-size)/1.5);
                    border-right: 3px solid var(--wm-checkboxset-icon-color);
                    border-bottom: 3px solid var(--wm-checkboxset-icon-color);
                    transform: rotate(45deg);
                    top: 3px;
                    left: 6px;
                }
            }
    
            // disabled state
            &:disabled {
                cursor: not-allowed;
                opacity: 0.6;
            }
        }

        &.checkbox {
            // display: inline-block;

            >label {
                padding: 0;
                display: inline-flex;
                width: auto;
                margin-left: var(--wm-checkboxset-label-margin-left);
                min-height: var(--wm-checkboxset-height);
                font-size: var(--wm-checkboxset-label-font-size);
                font-family: var(--wm-checkboxset-label-font-family);
                font-weight: normal;
                line-height: normal;
                letter-spacing: normal;
                cursor: pointer;

                .caption {
                    display: inline-block;
                    padding-left: 20px;
                    padding-top: 0;
                    margin-left: var(--wm-checkboxset-label-margin-left);

                    &:before,
                    &:after {
                        content: "";
                        display: inline-block;
                        position: absolute;
                    }

                }

            }
        }
    }
}