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

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

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

                    >input[type="checkbox"] {
                        width: var(--wm-checkboxset-width);
                        height: var(--wm-checkboxset-height);
                        border-width: var(--wm-checkboxset-border-width);
                        appearance: none;
                        -moz-appearance: none;
                        -webkit-appearance: none;
                        margin: 0;
                        position: absolute;
                        left: 0px;
                        z-index: 1;
                        cursor: pointer;
                        opacity: 1;

                        &:checked {
                            +.caption {
                                &:after {
                                    transform: translate(3px, 4px) rotate(-45deg) scale(1);
                                }
                            }
                        }

                    }

                    >input[type="checkbox"]:disabled {

                        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;

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

                        &:before {
                            width: var(--wm-checkboxset-width);
                            height: var(--wm-checkboxset-height);
                            left: 0;
                            top: 0;
                            background: var(--wm-checkboxset-background-color);
                            border-width: var(--wm-checkboxset-border-width, 2px);
                            border-style: solid;
                            border-color: var(--wm-checkboxset-border-color, #333);
                            border-radius: var(--wm-checkboxset-border-radius, 4px);


                            box-sizing: border-box;
                        }

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