.dbqdb-select-multi-popup {
    .dbqstp-container {
        .dbqstp-output-button {
            outline: 0;
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            width: 100%;
            max-height: $select-type-popup-output-max-height;
            overflow-x: hidden;
            overflow-y: auto;
            border-radius: 0 0 $border-radius-default $border-radius-default;
            @include scrollbar;

            &:hover {
                //border: 2px solid $select-type-popup-output-border-color-hover;
            }

            &.dbqstp-invalid {
                .dbqstp-output-content-container {
                    border-color: $select-type-popup-invalid-color;
                }
            } 

            .dbqstp-output-content-container {
                display: flex;
                flex-direction: column;
                background: $select-type-popup-output-background-color;
                outline: 0;
                border: $field-border-width solid $modal-border-color;
                border-radius: 0 0 $border-radius-default $border-radius-default;
                width: 100%;
                //height: $field-height;
                //min-height: $field-height;
                //padding: 12px 10px 12px;

                &:hover {
                    background-color: $modal-border-color;
                    // box-shadow: 0 1px 3px #0000001f;
                }

                .dbqstp-output-item {
                    display: flex;
                    align-items: center;
                    //margin-bottom: ($margin-default / 3);
                    height: ($field-height - (2 * $field-border-width));
                    padding: 0 10px;

                    &:last-child {
                        margin-bottom: 0px;
                    }

                    .dbqstp-attribute {
                        // display: flex;
                        // flex-direction: column;
                        // align-items: flex-start;
                        display: block;
                        width: 100%;

                        .dbqstp-attribute-name {
                            float: left;
                            font-size: $font-size-small;
                            line-height: 14px;
                            color: #999;
                            margin-bottom: ($margin-default / 5);
                            user-select: text;
                        }

                        .dbqstp-attribute-value {
                            float: left;
                            width: 100%;
                            text-align: left;
                            font-size: $font-size-base;
                            font-weight: 700;
                            line-height: 16px;
                            color: $text-color-default;
                            overflow-wrap: break-word;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            user-select: text;
                        }
                    }
                }

                .dbqstp-error {
                    color: $select-type-popup-invalid-color;
                }
            }
        }
    }

    &[data-is-read-only="true"] {
        .dbqstp-output-content-container {
			background: $modal-disabled-color !important; /* Important is still required here, even though it gets added AFTER the default styling...? */
			border: 2px solid $modal-disabled-color !important;
			cursor: not-allowed;
            font-weight: 700;
			opacity: 1;
			-webkit-opacity: 1; /* Override iOS opacity change affecting text & background color */
        }
    }

    // Material design customizations
    &[data-is-material-design="true"] {
        .dbqstp-container {
            .dbqstp-output-button {
                .dbqstp-output-content-container {
                    .dbqstp-output-item {
                        padding: 0;
                    }
                } 
            } 
        } 

        // Center the content vertically for material design variants when no value is available
        &[data-has-value="false"] {
            .dbqstp-container { 
                .dbqstp-output-button {
                    .dbqstp-output-content-container {
                        justify-content: center;
                    }
                }
            }
        }

        // Material design has a fixed height by default. We need more height for this property type.
        &[data-has-value="true"] {
            .dbqstp-container { 
                .dbqstp-output-button {
                    height: unset !important;
                    align-items: flex-start;

                    .dbqmd-end-icon {
                        padding-top: 1px;
                    }

                    .dbqstp-output-content-container {
                        height: unset !important;
                        justify-content: center;
                        min-height: calc($material-design-height - 1px) !important; // 1px will be added by the border of its parent
                    }
                }
            }
        }
    }
}

// The popup container will be moved to the end of the <body> tag upon opening. That's also why .dbqstp-popup-container is outside of .dbqstp-container in the CSS file.
.dbqstp-popup-container {
    //width: 100%;
    padding: 0 0 ($padding-default / 3) 0;
    background: $modal-label-background;
    overflow: hidden;
    z-index: 1060;
    min-width: 243px; // This is the minimum width we need in order to properly display the select- & deselect all buttons 

    .dbqstp-title-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: ($padding-default / 3) ($padding-default / 2);
        color: $modal-label-color;
        font-size: $font-size-base;
        font-weight: 500;
        
        .dbqstp-close {
            width: 12px;
            height: 12px;
            display: inline-flex;
            cursor: pointer;
            align-items: center;
            justify-content: center;

            svg {
                fill: $modal-label-color;
            }
        }
    }

    .dbqstp-search-input {
        width: calc(100% - 16px);
        //margin: 0px ($margin-default / 2) ($margin-default / 3) ($margin-default / 2);
        padding: 1px ($padding-default / 3);
        min-height: 30px;
        max-height: 30px;
        height: 30px;
        border-radius: 6px;
    }

    ul {
        list-style: none;
        padding: ($padding-default / 2) 0;
        margin: 0;
        max-height: 500px;
        overflow-y: auto;
        background-color: $global-background-color-default;
        @include scrollbar($sidebar-background, 0, $sidebar-scrollbar-thumb-color, $sidebar-scrollbar-thumb-color-hover, $sidebar-scrollbar-width, true);

        span {
            font-size: $font-size-small;
            font-weight: 400;
        }

        .dbqstp-no-result {
            display: block;
            margin: 0 ($margin-default / 2);
            color: $text-color-default;
        }

        .dbqstp-error {
            color: $select-type-popup-invalid-color;
        }

        li.dbqstp-popup-dropdown-item {
            color: $text-color-default;
            cursor: pointer;
            display: block;
            outline: 0;
            position: relative;
            font-weight: 600;
            padding: 1px ($padding-default / 2);
            width: 100%;

            .dbqstp-popup-dropdown-item-content {
                flex-wrap: nowrap;
                padding: ($padding-default / 2);
                position: relative;
                display: flex;
                -webkit-box-pack: start;
                justify-content: flex-start;
                -webkit-box-align: center;
                align-items: center;
                border-radius: 6px;

                .dbqstp-attribute {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;

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

                    .dbqstp-attribute-checkmark {
                        height: 16px;
                        margin-bottom: 4px;
                        display: none;
                        fill: $text-color-default;
                        flex-shrink: 0;
                    }
                }
            }

            &:hover,
            &.dbqstp-selected-dropdown-item {
                .dbqstp-popup-dropdown-item-content {
                    background: $background-item-color-default;
                }
            }

            &.dbqstp-selected-dropdown-item {
                .dbqstp-attribute-checkmark {
                    display: block !important;
                }
            }

            &.dbqstp-not-selectable {
                opacity: 0.5;
                cursor: not-allowed;

                .dbqstp-attribute-checkmark {
                    visibility: hidden;
                }
            }
        }
    }

    .dbqstp-loading {
        margin: ($margin-default / 3) $margin-default;
    }

    .dbqstp-buttons {
        display: flex;
        margin: ($margin-default / 3) $margin-default 0 $margin-default;

        .dbqstp-button {
            display: flex;
            justify-content: center;
            align-items: center;
            background: $color-primary;
            color: $color-white;
            border: none;
            margin-right: 5px;
            padding: 0;
            outline: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;

            svg {
                fill: $color-white;
            }
        }

        .dbqstp-select-buttons {
            display: flex;

            .dbqstp-button {
                svg {
                    width: 18px;
                    height: 18px;
                }
            }
        }

        .dbqstp-load-more-buttons {
            display: flex;
        }
    }
}

.dbqstp-image,
.dbqstp-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    width: 24px;
    height: 24px;
    background: #ccc;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 5px;
    color: $color-white;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.dbqstp-loading {
    @include loading-indicator-inline;
}