.app-checkbox {

    input[type="checkbox"] {
        appearance: none;
        margin: 0 8px 0 0;
        cursor: pointer;
        transition: all 0.2s ease;

        // root box
        & {
            width: var(--wm-checkbox-width);
            height: var(--wm-checkbox-height);
            background-color: var(--wm-checkbox-background-color);
            border: var(--wm-checkbox-border-width) solid var(--wm-checkbox-border-color);
            border-radius: var(--wm-checkbox-border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        // checked state
        &:checked {
            background-color: var(--wm-checkbox-background-color);
            border-color: var(--wm-checkbox-border-color);

            &::after {
                content: "";
                display: block;
                width: calc(var(--wm-checkbox-icon-size)/3);
                height: calc(var(--wm-checkbox-icon-size)/1.5);
                border-right: 3px solid var(--wm-checkbox-icon-color);
                border-bottom: 3px solid var(--wm-checkbox-icon-color);
                transform: rotate(45deg);
                top: 3px;
                left: 6px;
            }
        }

        // disabled state
        &:disabled {
            cursor: not-allowed;
            opacity: 0.6;
        }
    }

    &.checkbox {

        >label {
            padding: 0;
            display: inline-flex;
            width: auto;
            min-height: var(--wm-checkbox-width);
            margin-left: var(--wm-checkbox-label-margin-left);
            font-size: var(--wm-checkbox-label-font-size);
            font-family: var(--wm-checkbox-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-checkbox-label-margin-left);

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

            }
        }
    }
}