////@import "../../../abstracts/abstracts";

// Dynabloqs Material Design checkbox
.dbqmd-form-group {
    .dbqmd-checkbox-label {
        display: flex !important; // flex to center i-icon
        height: $material-design-height;
        padding: 16px 15px 16px 54px;
        cursor: pointer;
        border-bottom: 1px solid $material-design-default-border-color;
        border-radius: $material-design-border-radius;
        background: $material-design-default-background-color;
        //box-shadow: $material-design-box-shadow;

        // Disabled field
        &:has(.dbqmd-checkbox:disabled), &:has(.dbqmd-checkbox.disabled) {
            background: $material-design-disabled-background-color !important;
            border-color: $material-design-disabled-border-color !important;
            cursor: not-allowed;

            .dbqmd-title-label {
                color: $material-design-disabled-text-color !important;
            }

            .dbqmd-checkbox-box {
                border-color: $material-design-disabled-border-color !important;

                &.dbqmd-checked {
                    border-color: $color-primary !important;
                }
            }
        }

        .dbqmd-checkbox {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: -1;

            &:disabled {
                cursor: not-allowed;
            }
        }

        .dbqmd-checkbox-box {
            display: block;
            position: absolute;
            left: 15px;
            box-sizing: border-box;
            border: 1px solid;
            border-radius: 5px;
            width: 22px;
            height: 22px;
            transition: $material-design-checkbox-selected-color .1s ease-out;
            border-color: $material-design-focus-text-color;
            color: $material-design-checkbox-selected-color;
            
            // This centers the checkbox vertically, even if the label would need more than 1 line
            top: 50%;
            margin-top: -12px;

            &::before {
                content: "";
                display: block;
                position: absolute;
                width: 38px;
                height: 38px;
                top: -9px;
                left: -9px;
                background: $material-design-checkbox-selected-color;
                border-radius: 50%;
                opacity: 0;
                transition: opacity .2s ease-in-out;
                z-index: 0;
            }

            &::after {
                content: "";
                display: block;
                position: absolute;
                width: 14px;
                height: 8px;
                left: 3px;
                top: 4px;
                opacity: 0;
                border: 2px solid #fff;
                border-right: 0;
                border-top: 0;
                transform: scale(0) rotate(-45deg);
                transition: transform .1s ease-out;
            }

            // Checkbox checked styling
            &.dbqmd-checked {
                border-color: $material-design-checkbox-selected-color;
                background: $material-design-checkbox-selected-color;

                &::before {

                }
                
                &::after {
                    opacity: 1;
                    transform: scale(1) rotate(-45deg);
                }
            }
        }

        .dbqmd-checkbox-label-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: $material-design-icon-padding;
            width: 100%;

            // The title label is different for checkboxes
            .dbqmd-title-label {
                width: 100%;    // Added to overrule base styling for labels with a calculated width; 100% minus icon size.
                position: initial !important;
                display: inline-block;
                padding: 0 !important;
                color: $text-color-default;
            }
            
            // Reset the icon absolute positioning for checkboxes, we want to display the icon directly next to the label
            // .dbqmd-icon {
            //     position: initial;
            // }
        }

        // Hover styling
        &.dbqmd-hover {
            .dbqmd-checkbox-box {
                &::before {
                    opacity: 0.2;
                }
            }
        }

        // Error styling
        &.dbqmd-error {
            .dbqmd-checkbox-box {
                border-color: $material-design-error-color;
            }
        }

        // Disabled field
        &:has(input[disabled]) {
            cursor: not-allowed;

            &.dbqmd-hover {
                .dbqmd-checkbox-box {
                    &::before {
                        opacity: 0;
                    }
                }
            }
        }

        // Styling end icon
        &.dbqmd-has-end-icon {
            padding-right: $material-design-end-icon-total-padding;
        }
    }
}