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

// Basic Dynabloqs Material Design styling
.dbqmd-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
    margin-right: 0;

    // remove border - (removed for the disabled view of the form group)
    &.dbq-form-group-padding {
        border: 0 !important;
    }
}

.dbqmd-col, .dbqmd-col-1, .dbqmd-col-2, .dbqmd-col-3, .dbqmd-col-4, .dbqmd-col-5, .dbqmd-col-6, .dbqmd-col-7, .dbqmd-col-8, .dbqmd-col-9, .dbqmd-col-10, .dbqmd-col-11, .dbqmd-col-12, .dbqmd-col-auto, .dbqmd-col-lg, .dbqmd-col-lg-1, .dbqmd-col-lg-2, .dbqmd-col-lg-3, .dbqmd-col-lg-4, .dbqmd-col-lg-5, .dbqmd-col-lg-6, .dbqmd-col-lg-7, .dbqmd-col-lg-8, .dbqmd-col-lg-9, .dbqmd-col-lg-10, .dbqmd-col-lg-11, .dbqmd-col-lg-12, .dbqmd-col-lg-auto, .dbqmd-col-md, .dbqmd-col-md-1, .dbqmd-col-md-2, .dbqmd-col-md-3, .dbqmd-col-md-4, .dbqmd-col-md-5, .dbqmd-col-md-6, .dbqmd-col-md-7, .dbqmd-col-md-8, .dbqmd-col-md-9, .dbqmd-col-md-10, .dbqmd-col-md-11, .dbqmd-col-md-12, .dbqmd-col-md-auto, .dbqmd-col-sm, .dbqmd-col-sm-1, .dbqmd-col-sm-2, .dbqmd-col-sm-3, .dbqmd-col-sm-4, .dbqmd-col-sm-5, .dbqmd-col-sm-6, .dbqmd-col-sm-7, .dbqmd-col-sm-8, .dbqmd-col-sm-9, .dbqmd-col-sm-10, .dbqmd-col-sm-11, .dbqmd-col-sm-12, .dbqmd-col-sm-auto, .dbqmd-col-xl, .dbqmd-col-xl-1, .dbqmd-col-xl-2, .dbqmd-col-xl-3, .dbqmd-col-xl-4, .dbqmd-col-xl-5, .dbqmd-col-xl-6, .dbqmd-col-xl-7, .dbqmd-col-xl-8, .dbqmd-col-xl-9, .dbqmd-col-xl-10, .dbqmd-col-xl-11, .dbqmd-col-xl-12, .dbqmd-col-xl-auto {
    width: 100%; // This must be different for each col.
    padding-right: 0;
    padding-left: 0;
    display: flex;
    flex-direction: column;
}

.dbqmd-reset {
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
}

// Dynabloqs Material Design basic styling
.dbqmd-form-group {
    margin: 0;

    &:not(:has(.dbqmd-dropdown-toggle)) {
        box-shadow: $material-design-box-shadow;    // Experiment if the shadow can be added on this level
        border-radius: $material-design-border-radius;
    }
    
    .dbqmd-label {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
        margin-bottom: 0;
        //box-shadow: $material-design-box-shadow;  // Commented out because shadow is added on a higher level
        border-radius: $material-design-border-radius;
        // to-do: check if ellipsis works on this level
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        .dbqmd-title-label {
            position: absolute;
            left: 15px;
            font-size: $material-design-default-label-font-size;
            color: $material-design-default-label-color;
            padding: 0;
            transform-origin: top left;
            transition: transform 0.2s;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            cursor: text;
            width: calc(100% - $padding-default - $padding-default); // Enabled to ensure ellipsis on labels - 100% minus the padding of the input
            z-index: 1;
            display: flex;  // added display: flex to center the info-tooltip
            align-items: center;
            //transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

            span {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        // Icon styling
        .dbqmd-icon {
            position: absolute;

            svg {
                fill: $material-design-focus-text-color;
                width: $material-design-icon-size;
                height: $material-design-icon-size;
            }

            &.dbqmd-start-icon {
                left: $material-design-icon-padding;
                //width: calc(100% - $material-design-icon-padding);    // This is causing problems with selecting text in a date picker, probably wrong styling.
            }

            &.dbqmd-end-icon {
                //right: $material-design-icon-padding;
                right: $material-design-end-icon-padding; // Specific size due to the end icon (22px wide); total size including the left padding of also 9px result in 40px
            }

            &.dbqmd-icon-info-tooltip,
            &.dbqmd-icon-inline-info-tooltip {
                svg {
                    fill: $material-design-icon-tooltip-color;
                    width: $material-design-icon-tooltip-size;
                    height: $material-design-icon-tooltip-size;
                }
            }

            // The inline-info-tooltip will be displayed directly next to the title label
            &.dbqmd-icon-inline-info-tooltip {
                position: initial;
                cursor: pointer;
                margin-left: 5px;
                display: inline-flex;
                align-items: center;
                vertical-align: middle;
                height: $material-design-icon-tooltip-size;
            }

            &.dbqmd-icon-error-tooltip {
                svg {
                    fill: $material-design-error-color;
                }
            }
        }

        // Error styling
        &.dbqmd-error {

            // Error styling should only be displayed when the property isn't focused
            &:not(.dbqmd-focus, .dbqmd-focus-custom) {

                .dbqmd-title-label {
                    color: $material-design-error-color;
                }
                
                .dbqmd-start-icon {
                    svg {
                        fill: $material-design-error-color;
                    }
                }

                .dbqmd-icon-info-tooltip {
                    display: none;
                }
            }
        }

        // Focus & has-value styling
        &:not(.dbqmd-static-label) {
            &.dbqmd-focus,
            &.dbqmd-focus-custom,
            &.dbqmd-has-value {
                .dbqmd-title-label {
                    transform: translateY(-10px) scale($material-design-scale-factor-label);
                    width: initial;
                    max-width: 100%;
                    padding-right: 0;
                }

                &.dbqmd-has-start-icon {
                    .dbqmd-title-label {
                        padding-right: 0;
                        left: $material-design-icon-total-padding;
                    }
                }

                &.dbqmd-has-end-icon {
                    .dbqmd-title-label {
                        padding-right: 0;
                        right: calc($material-design-end-icon-total-padding * $material-design-scale-factor-label); // To-do: Configure the right padding for the labels
                    }
                }

                // &.dbqmd-has-start-icon.dbqmd-has-end-icon {
                //     .dbqmd-title-label {
                //         width: calc((100% - $material-design-icon-total-padding  - $material-design-icon-total-padding) * $material-design-scale-factor-label);
                //     }
                // }
            }
        }

        // static position for labels
        &.dbqmd-static-label {
            &:not(:has(:is(.dbq-image-file-upload[data-has-value="false"][data-is-read-only="false"], .file-upload[data-has-value="false"]))) {
                .dbqmd-title-label {
                    top: 5px;
                    font-size: calc($material-design-focus-font-size * $material-design-scale-factor-label);
                    display: inline-block;  // Added to prevent the info icon from overlapping the label

                    .dbqmd-icon-info-tooltip,
                    .dbqmd-icon-inline-info-tooltip {
                        margin-left: 5px;
                        cursor: pointer;

                        svg {
                            height: calc($material-design-icon-tooltip-size * $material-design-scale-factor-label);
                            width: calc($material-design-icon-tooltip-size * $material-design-scale-factor-label);
                            //transform: translateY(-2px);
                        }
                    }
                }
            }

            &:has(.error) {
                .dbqmd-title-label {
                    color: $material-design-error-color;
                }
            }
        }

        // Focus styling
        &.dbqmd-focus,
        &.dbqmd-focus-custom {
            .dbqmd-title-label {
                color: $material-design-focus-label-color;
            }

            .dbqmd-icon {
                
                // Hide the error tooltip when the property is focused
                &.dbqmd-icon-error-tooltip {
                    display: none;
                }
            }

            .dbqmd-ripple {
                transform: scaleX(1);
            }
        }

        // When the contents of a material design input was selected and the user attempted to
        // click inside another material design input, the click would only register when
        // clicking around the .dbqmd-title-label. Since the title label is covering the entire
        // center of the input, this meant selecting another input was often not working.
        // By setting user-select to none, the label can't be selected and this problem is solved.
        &:not(.dbqmd-has-value) {
            .dbqmd-title-label {
                user-select: none;
            }
        }
        
        // Start icon styling
        &.dbqmd-has-start-icon {
            .dbqmd-title-label {
                left: $material-design-icon-total-padding;
                width: calc(100% - $material-design-icon-total-padding - $padding-default);
            }
        }

        // End icon styling
        &.dbqmd-has-end-icon {
            .dbqmd-title-label {
                //padding-right: $material-design-icon-total-padding;
                width: calc(100% - $material-design-end-icon-total-padding - $padding-default);
            }

            &.dbqmd-has-value {
                padding-right: 0;
            }
        }

        // Start and end icon styling
        &.dbqmd-has-start-icon.dbqmd-has-end-icon {
            .dbqmd-title-label {
                left: $material-design-icon-total-padding;
                width: calc(100% - $material-design-icon-total-padding - $material-design-end-icon-total-padding);
            }
        }

        // Textarea specific label customizations
        &.dbqmd-textarea-label {
            // Align the label to the top, as this field can expand vertically.
            align-items: normal;
            
            .dbqmd-title-label, 
            .dbqmd-icon {
                // This field is an exception where the label isn't centered, so it is manually adjusted.
                top: 15px;
            }
        }
    }

    .dbqmd-label,
    .dbqmd-dropdown-title-label {
        .dbqmd-required-asterisk {
            color: $text-color-warning;
        }
    }
    

    // adjust icon size for add and view buttons
    .input-group-append {
        .dbq-select-view-button, .dbq-select-add-button {
            border-radius: 0;
            
            svg {
                padding: 0;
            }
        }

        button:last-of-type {
            //border-top-right-radius: $material-design-border-radius;  // still needs to be fixed
        }
    }

    // Coloris plugin (color picker)
    &.coloris-thumbnail-circle .clr-field button {
        left: $padding-default;
        width: 24px;
        height: 24px;
    }

    // Disabled fields
    &:has(input[disabled]),
    &:has([disabled="disabled"]) {

        // Label
        .dbqmd-label {
            .dbqmd-title-label {
                color: $material-design-disabled-label-color;
            }
        }

        .dbqmd-dropdown-toggle {
            .dbqmd-dropdown-content-container {
                .dbqmd-dropdown-title-label {
                    color: $material-design-disabled-label-color;
                }
            }
        }  

        // Icon styling
        .dbqmd-icon {
            svg {
                fill: $material-design-disabled-label-color;
            }
        }
    }

    // Ripple styling
    .dbqmd-ripple {
        background-color: $material-design-focus-border-color;
        bottom: 0;
        height: 2px;
        left: 0;
        position: absolute;
        transform: scaleX(0);
        transition: transform .18s cubic-bezier(.4,0,.2,1);
        width: 100%;
        z-index: 2;
    }
}

// To do: Place the following code in a logical position later:

// Label as group title
.dbq-form {
    .dbqmd-row {
        .dbq-form-group-title-label {
            border: 0;
            border-radius: $material-design-border-radius;
            background: $material-design-default-background-color;
            font-size: calc($material-design-focus-font-size * $material-design-scale-factor-label);
            color: $material-design-default-label-color;
            padding: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            z-index: 1;

            label, &[data-has-info-tooltip="true"] label {
                padding: 5px $global-padding;
            }
            
            // Label for a disabled form group
            &.dbq-label-disabled {
                background: $material-design-disabled-background-color;
                color: $material-design-disabled-label-color;
                border: 0 !important;
                cursor: not-allowed;

                .dbq-label-text {
                    cursor: not-allowed;
                }
            }
        }
    }
}

// Hide label
.dbq-property-no-label {
    .dbqmd-form-group {
        .dbqmd-label,
        .dbqmd-label.dbqmd-static-label  {
            .dbqmd-title-label {
                display: none;
            }
        }
    }
}

// Styling material design input property
.dbqdclrvl-container,
.folder-document-class-list-dashboard-document,
.classlist-dashboard {
	.dbq-document {
        .topic {
            // Set property as read only
            [data-element-type="Text"]:has(.dbqdb-insert-property):not(:has(.dbq-round-image)) {
                min-height: $material-design-height;
                //margin-bottom: $margin-default; // Margin should be set for the element in the DocumentBuilder module

                & > div {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    p {
                        min-height: 21px !important;    // font-size 14px * line-height 1.5
                    }

                    .dbq-element-header-5 {
                        font-size: $material-design-focus-label-font-size;
                    }
                }
            }

            // Input list
            .input-list-content {
                [data-element-type="Text"]:has(.dbqdb-insert-property):not(:has(.dbq-round-image)) {
                    min-height: unset;
                    margin-bottom: 0;

                    p {
                        padding-top: inherit;
                        min-height: unset !important;
                    }
                }
            }
        }

        // Styling for view mode
        &[data-view-mode=View] {
            .topic {
                // Inset property as read only
                [data-element-type="Text"]:not(:has(.dbq-round-image)) {
                    min-height: inherit;
                    
                    & > div {
                        display: inline;
                        flex-direction: unset;
                        justify-content: unset;
                    }
                }
            }
        }
    }
}