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

// Dynabloqs Material Design dropdown
// This is used to enhance our own bootstrap SelectTypeDropdowns with Material Design styling.
// !important is required due to the original classes that override the default styling.
.dbqmd-dropdown-toggle {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: $material-design-height;
    min-height: $material-design-height;
    margin: 0;
    padding: 0;
    border: none !important;
    border-bottom: 1px solid $material-design-default-border-color !important;
    border-radius: $material-design-border-radius !important;
    background: $material-design-default-background-color !important;
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-shadow: $material-design-box-shadow;

    // Disabled field
    &:disabled, &.disabled {
        background: $material-design-disabled-background-color !important;
        border-color: $material-design-disabled-border-color !important;
        cursor: not-allowed;
        
        .dbqmd-dropdown-content-container, .dbqmd-dropdown-content-container.disabled {
            background: $material-design-disabled-background-color !important;
            color: $material-design-disabled-text-color !important;
            -webkit-text-fill-color: unset !important;
            
            //background-image: url("data:image/svg+xml;utf8,<svg fill='#{encode-color($material-design-disabled-label-color)}' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><g><path d='M10,16L0,6l2-2l8,8l8-8l2,2L10,16z'/></g></svg>") !important;
            background-image: none !important;
            padding: 0 0 0 $global-padding;
        }
    }

    .dbqmd-dropdown-content-container {
        display: flex;
        align-items: flex-start;
        // 1px is added by the parent's border
        height: calc($material-design-height - 1px) !important;
        margin: 0;
        padding-left: 15px !important; // to match the Mobiscroll form component styling
        border: 0 !important;
        border-radius: 0 !important;
        background-color: transparent !important;
        overflow: hidden !important;
        font-size: $material-design-focus-font-size !important;
        font-weight: 400 !important;

        .dbqmd-dropdown-title-label {
            text-align: start;
            color: $material-design-default-label-color;
            font-size: $material-design-default-label-font-size;
            display: inline-flex;
        }

        .dbqstd-output-item {
            width: 100%;
        }

        .dbqstp-output-item {
            width: 100%;

            .dbqstp-attribute {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        // Prevent spans inside the container from overflowing
        > span {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

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

        .dbqmd-dropdown-content-container {
            height: calc($material-design-height-compact - 1px) !important;
        }
    }

    // Hover styling for enabled dropdown
    &:hover:not(:disabled) {
        background: $material-design-hover-background-color !important;
    }

    // When the dropdown is open/focused
    &[aria-expanded="true"] {
        .dbqmd-dropdown-content-container {
            .dbqmd-dropdown-title-label {
                color: $material-design-focus-label-color;
            }
        }

        // When the dropdown is open but has no value
        &:not(.dbqmd-dropdown-has-value) {
            .dbqmd-dropdown-content-container {
                .dbqmd-dropdown-title-label {
                    transform: translateY(-10px);
                }
            }
        }

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

    //  When the dropdown is open/focused or dropdown has a value
    &[aria-expanded="true"],
    &.dbqmd-dropdown-has-value {
        .dbqmd-dropdown-content-container {
            .dbqmd-dropdown-title-label {
                font-size: $material-design-focus-label-font-size;
            }

            .dbqmd-icon {
                &.dbqmd-icon-inline-info-tooltip {
                    cursor: pointer;
                    margin-left: 5px;
                    display: inline-flex;
                    align-items: center;
                    vertical-align: middle;
                    transform: translateY(-2px);

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

    // Error styling
    &.dbqmd-error {
        border-bottom-color: $material-design-error-color !important;

        .dbqmd-dropdown-content-container {
            .dbqmd-dropdown-title-label {
                color: $material-design-error-color !important;
            }
        }

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

    // Icon styling
    .dbqmd-icon {
        align-self: center;

        svg {
            fill: $material-design-focus-text-color;
            opacity: 1; // Overrides the generic disabled SVG styling
            height: $material-design-icon-size;
            width: $material-design-icon-size;
        }

        &.dbqmd-end-icon {
            padding: 0 $material-design-end-icon-padding;
        }

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

        // The inline-info-tooltip will be displayed directly next to the title label
        &.dbqmd-icon-inline-info-tooltip {
            cursor: pointer;
            margin-left: 5px;
            display: inline-flex;
            align-items: center;
            vertical-align: middle;
            transform: translateY(-2px);
        }

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

// Input group styling
.dbqdb-select-single,
.dbqdb-select-single-tree {
    width: 100%;

    .input-group {
        flex-wrap: nowrap;
        justify-content: space-between;

        .dbqstd-container .dbqmd-dropdown-toggle {
            border-top-right-radius: $material-design-border-radius-single;
        }

        // Hide the add/view buttons by default
        .input-group-append {
            display: none;

            button {
                background: $material-design-default-background-color;
                border: 0;
                border-bottom: 1px solid $material-design-default-border-color;

                &:hover {
                    background: $material-design-hover-background-color;

                    svg {
                        fill: $color-primary;
                    }
                }

                svg {
                    fill: $material-design-default-label-color;
                }
            }
        }
    }

    // Show the buttons when the required data is present
    &[data-inspect-folder-document-id][data-inspect-add-rule-code] .input-group-append {
        display: flex;
        margin-left: 0;

        button:last-of-type {
            border-top-right-radius: $material-design-border-radius-single;
        }
    }

    // Hide buttons if the required data is missing
    &[data-inspect-add-rule-code=""] .input-group-append > .dbq-select-add-button,
    &[data-inspect-folder-document-id=""] .input-group-append > .dbq-select-view-button,
    &[data-inspect-folder-document-id=""] .input-group-append > .dbq-select-add-button {
        display: none !important;
    }

    // Hide the view button when there's no value
    &[data-has-value="false"] .input-group-append > .dbq-select-view-button {
        display: none;
    }

    // Show the view button when there's a value
    &[data-has-value="true"] .input-group-append > .dbq-select-view-button {
        display: block;
    }

    // Border-radius logic based on visible buttons
    .dbqmd-dropdown-toggle {
        border-top-right-radius: $material-design-border-radius-single !important;
    }

    &[data-inspect-folder-document-id][data-has-value="true"]:not([data-inspect-folder-document-id=""]),
    &[data-inspect-add-rule-code]:not([data-inspect-add-rule-code=""]) {
        .dbqmd-dropdown-toggle {
            border-top-right-radius: 0 !important;
        }
    }

    &[data-is-read-only="false"][data-inspect-folder-document-id][data-inspect-add-rule-code][data-has-value="true"]:not([data-inspect-folder-document-id=""]):not([data-inspect-add-rule-code=""]) {
        button.dbq-select-view-button {
            border-top-right-radius: 0 !important;
        }
    }

    // Read-only styling
    &[data-is-read-only="true"] {
        .dbqmd-dropdown-toggle {
            background: $material-design-disabled-background-color !important;
            border-color: $material-design-disabled-border-color !important;
            cursor: not-allowed;
            //font-weight: 700;
            opacity: 1;

            .dbqmd-dropdown-content-container {
                padding-right: 0 !important; // No right padding because there is no carrot in read only

                .dbqmd-dropdown-title-label {
                    color: $material-design-disabled-label-color
                }
            }
        }

        .input-group-append {
            button.dbq-select-view-button {
                background: $material-design-disabled-background-color;
                border-color: $material-design-disabled-border-color;
                color: $color-primary;
                border-top-right-radius: $material-design-border-radius-single !important;

                &:hover,
                &:active {
                    background: $material-design-disabled-background-color;
                    border-color: $material-design-disabled-border-color;
                    color: color(text-color-default);
                }
            }

            button.dbq-select-add-button {
                display: none;
            }
        }
    }
}