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

// Dynabloqs Material Design input
.dbqmd-label {
    .dbqmd-input {
        background: $material-design-default-background-color;
        border-radius: $material-design-border-radius;
        color: $text-color-default;
        width: $material-design-width;
        height: $material-design-height;
        border: 0; // override old styling
        border-bottom: 1px solid $material-design-default-border-color;
        padding: 0 $padding-default;
        overflow: hidden !important;
        white-space: nowrap;
        text-overflow: ellipsis;
        //box-shadow: $material-design-box-shadow;

        // The placeholder must be hidden by default, due to the label being displayed in the same position.
        // When the user focuses the input and it's empty, the placeholder should be visible.
        &:not(.dbqmd-empty-label) {
            @include hide-placeholder;
        }

        &:disabled {
            background: $material-design-disabled-background-color;
            border-color: $material-design-disabled-border-color;
            border-top-color: $material-design-disabled-background-color;
            color: $material-design-disabled-text-color;
            overflow: hidden;
            text-overflow: unset;
        }

        &.dbqmd-hover {
            &:not(:disabled) {
                background: $material-design-hover-background-color;
                border-top-color: $material-design-hover-background-color;
            }

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

        &.dbqmd-focus,
        &.dbqmd-focus-custom {
            //border-bottom-color: $material-design-focus-border-color;
            
            // Adding a box shadow to add an extra 1px bottom border, making the bottom border seemingly 2px thick, 
            // just like the Mobiscroll form components when they are focused.
            //box-shadow: inset 0px -1px 0px 0px $material-design-focus-border-color; 

            // Show the placeholder when the input is focused
            @include show-placeholder;
        }

        &.dbqmd-focus,
        &.dbqmd-focus-custom {
            color: $material-design-focus-text-color;
        }

        &.dbqmd-error {
            border-bottom-color: $material-design-error-color;
        }

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

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

    &:has(.dbqmd-title-label:not(:empty)) {
        input.dbqmd-input {
            &.dbqmd-focus,
            &.dbqmd-focus-custom,
            &.dbqmd-has-value {
                padding-top: 15px;
                font-size: $material-design-focus-font-size;
            } 
        }
    }

    // No label styling (compact view)
    &.dbqmd-empty-label {
        .dbqmd-input {
            min-height: $material-design-height-compact;
            height: $material-design-height-compact;
        }
    }
}

// Styling for the addon button on the right side of the input field
.input-group:has(.dbqmd-input) {
    &:has(.dbqdb-input-group-addon.dbqdb-input-group-addon-right) {
        display: flex;
        flex-direction: row;

        .dbqmd-label {
            flex-grow: 1;
            flex-shrink: 1;
            min-width: 0;
            width: unset;

            .dbqmd-input {
                border-top-right-radius: 0;
            }
        }

        .dbqdb-input-group-addon {
            background: $material-design-default-background-color;
            border: 0; // override old styling
            border-bottom: 1px solid $material-design-default-border-color;
            border-radius: $material-design-border-radius;
            border-top-left-radius: 0;
            color: $text-color-default;
            height: $material-design-height;
            padding: 0;

            .dbqdb-input-button, .dbqdb-input-button:focus {
                background: transparent;
                border: 0;
                outline: 0;
                cursor: pointer;

                svg {
                    cursor: pointer;
                    background: transparent;
                }
            }
        }

        &:has(.dbqmd-input:disabled) {
            .dbqdb-input-group-addon {
                background: $material-design-disabled-background-color;
                color: $material-design-disabled-text-color;
                border-bottom: 1px solid $material-design-disabled-border-color;
            }
        }
    }
}