/* Checkbox component styles and tokens */
@import (optional) url('../../../../components/input/checkbox.less');
@import (optional) url('../../../../generated/variables/mobile/components/checkbox.variant.less');

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

        &.checkbox {
            display: inline-block;

            >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;

                >input[type="checkbox"] {
                    width: var(--wm-checkbox-width);
                    height: var(--wm-checkbox-width);
                    //background-color: var(--wm-checkbox-background-color);
                    //border-color: var(--wm-checkbox-border-color);
                    border-width: var(--wm-checkbox-border-width);
                    appearance: none;
                    -moz-appearance: none;
                    -webkit-appearance: none;
                    margin: 0;
                    position: absolute;
                    left: 0px;
                    z-index: 1;
                    cursor: pointer;
                    opacity: 1;
                    // background: var(--wm-checkbox-state-layer-color); // not in mobile tokens

                    &:checked {
                        +.caption {
                            &:after {
                                transform: translate(3px, 4px) rotate(-45deg) scale(1);
                            }
                        }
                    }
                  
                }
                >input[type="checkbox"]:disabled {
                    // Use a token if available, or set a variable
                    // background-color: var(--wm-checkbox-disabled-background-color);
                    // border-color: var(--wm-checkbox-disabled-border-color);
                    cursor: not-allowed;
                }
                
                >input[type="checkbox"]:disabled + .caption:before,
                >input[type="checkbox"]:disabled + .caption:after {
                    opacity: var(--wm-checkbox-disabled-opacity, 0.38); 
                    cursor: not-allowed;
                }

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

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

                    &:before {
                        width: var(--wm-checkbox-width); 
                        height: var(--wm-checkbox-width); 
                        left: 0; 
                        top: 0; 
                        background: var(--wm-checkbox-background-color);
                        border: var(--wm-checkbox-border-width) solid var(--wm-checkbox-border-color);
                        border-radius: var(--wm-checkbox-border-radius); 
                        box-sizing: border-box;
                    }

                    &:after {
                        top: 0; 
                        left: 0; 
                        width: var(--wm-space-2); 
                        height: var(--wm-space-2); 
                        border: solid 2px var(--wm-checkbox-icon-color);
                        border-right: none;
                        border-top: none;
                        transform: translate(3px, 4px) rotate(-45deg) scale(0);
                        transition: all 0.2s ease-in-out;
                    }
                }
            }
        }
    }
}