// This file is created to store all custom document element styles which can be added to an element in the document editor.
.dbq-document {
    
    // Specific styling for a document style that is currently used in RUMM (project -> Performance Dashboard -> Financiele restwaarde)
    .dbq-dashboard-financial-blocks {
        .flex-container {
            .dbq-column {
                gap: 0px;

                .element-collapsible {
                    border-radius: 5px;
                }
            }
        }

        hr {
            margin: 0 !important; // overrule important in dbq-form hr
            margin-bottom: 15px !important;
        }
    }

    // Specific styling for the birthdays input list in a dashboard called "HRM | Vandaag jarig" which is available at Mijn Cockpit => Dashboard
    .dbq-input-list-birthdays {
        .input-list-item-content {

            .dbq-column {
                justify-content: center;

                &:first-child {
                    flex: none;
                }
            }

            .dbqdb-image {
                width: 50px;
                height: 50px;
                object-fit: cover;
                border-radius: 50%;
            }

            p {
                min-height: inherit !important;
                margin-bottom: 0 !important;
            }
        }
    }
    
    // Specific styling to only show labels for the first row, allowing an input list to display all items like a "table"
	.dbq-input-list-no-repeating-labels {
		.input-list[data-is-read-only="true"] {
			.input-list-item, .input-list-item:first-of-type .input-list-item:last-of-type {
				.dbq-element-header-5 {
					display: none;
				}

				&:first-of-type {
					.dbq-element-header-5 {
						display: block;
					}
				}
			}
		}
	}

    // Small margin to overrule the default margin
    .dbq-element-margin-small {
        margin-bottom: 5px;
    }

    // Mostly used for graphs inside dashboards as far as I (Jeroen) know
    .dbq-wrapper {
        border-radius: $border-radius-default;
        padding: $padding-default;
        margin-bottom: $margin-default; //!important; // removed important because it's overruling the 'dbqdb-last-visible-element' class
        backdrop-filter: unset;
        background: unset;
        background-color: $wrapper-background;
        color: color(text-color-p);
        -webkit-box-shadow: $global-box-shadow;
        -moz-box-shadow: $global-box-shadow;
        box-shadow: $global-box-shadow;
    }

    // Background colors
    // Inherit text color for all gradient background variants
    div[class*="dbq-background-gradient-"] {
        .graph-value-chart-container {
            .graph-name-container,
            .graph-value-container {
                color: inherit;
            }
        }
    }

    .dbq-background-gradient-primary {
        color: #fff;
        background: linear-gradient(90deg, $color-primary, mix(#fff, $color-primary, 20%)) !important;
    }

    .dbq-background-gradient-light {
        color: #000;
        background: linear-gradient(90deg, #f3f4f6, #e5e7eb) !important;
    }

    .dbq-background-gradient-dark {
        color: #fff;
        background: linear-gradient(90deg, #111827, #1f2937) !important;
    }

    .dbq-background-gradient-blue-subtle {
        color: #000;
        background: linear-gradient(90deg, #e8f0fe, #d2e3fc) !important;
    }

    .dbq-background-gradient-blue {
        color: #fff;
        background: linear-gradient(90deg, #1a73e8, #4285f4) !important;
    }

    .dbq-background-gradient-green-subtle {
        color: #000;
        background: linear-gradient(90deg, #e6f4ea, #ceedd8) !important;
    }

    .dbq-background-gradient-green {
        color: #fff;
        background: linear-gradient(90deg, #1e8e3e, #34a853) !important;
    }

    .dbq-background-gradient-amber-subtle {
        color: #000;
        background: linear-gradient(90deg, #ede6cf, #fde293) !important;
    }

    .dbq-background-gradient-amber {
        color: #fff;
        background: linear-gradient(90deg, #f9ab00, #fbbc04) !important;
    }

    .dbq-background-gradient-red-subtle {
        color: #000;
        background: linear-gradient(90deg, #fce8e6, #fad2cf) !important;
    }

    .dbq-background-gradient-red {
        color: #fff;
        background: linear-gradient(90deg, #d93025, #ea4335) !important;
    }

    .dbq-background-gradient-purple-subtle {
        color: #000;
        background: linear-gradient(90deg, #ede9fe, #ddd6fe) !important;
    }

    .dbq-background-gradient-purple {
        color: #fff;
        background: linear-gradient(90deg, #6d28d9, #7c3aed) !important;
    }

    .dbq-background-gradient-teal-subtle {
        color: #000;
        background: linear-gradient(90deg, #e6f7f5, #ccefed) !important;
    }

    .dbq-background-gradient-teal {
        color: #fff;
        background: linear-gradient(90deg, #0f766e, #14b8a6) !important;
    }

    .dbq-background-gradient-gray-subtle {
        color: #000;
        background: linear-gradient(90deg, #f3f4f6, #e5e7eb) !important;
    }

    .dbq-background-gradient-gray {
        color: #fff;
        background: linear-gradient(90deg, #374151, #4b5563) !important;
    }

    .dbq-ellipsis-1 {
        @include ellipsis(1);
    }

    .dbq-ellipsis-2 {
        @include ellipsis(2);
    }

    .dbq-ellipsis-3 {
        @include ellipsis(3);
    }

    .dbq-ellipsis-4 {
        @include ellipsis(4);
    }

    .dbq-ellipsis-5 {
        @include ellipsis(5);
    }

    .dbq-ellipsis-6 {
        @include ellipsis(6);
    }

    .dbq-ellipsis-7 {
        @include ellipsis(7);
    }

    .dbq-ellipsis-8 {
        @include ellipsis(8);
    }

    .dbq-ellipsis-9 {
        @include ellipsis(9);
    }

    .dbq-ellipsis-10 {
        @include ellipsis(10);
    }

    // Styling for when the last column contains a button (e.g. an execute header).
    .dbq-column-inline-end-button {
        .dbqdb-element {
            margin: 0;
        }

        div[data-element-type="Button"] {
            height: 100%;

            .dbqdb-action-button.action-button.raised {
                height: 100%;

                a {
                    height:100%;
                    display: flex;
                    align-items: center;
                }
            }
        }

        & > div:last-child {
            flex: 0 0 auto;
        }
    } 
}