/* ==========================================================================
   sdg_monitor.css: Nachhaltigkeitsmonitor
   ========================================================================== */

:root {
    --container-height: 400px;
}

/* Styling Kennblatt */

.wrapper--sdg-card-with-chart {
    width: 100%;
    height: var(--container-height);
}

.dark .wrapper--sdg-card-with-chart {
    background: hsl(0, 0%, 0%);

}

.sdg-heading {
    margin: 0;
    hyphens: none;
    display: flex;
    flex-wrap: wrap;
}

.sdg-indicator-id {
    position: relative;
    right: 0; top: 0;
    line-height: 1;
    font-family: monospace;
    font-size: 0.8rem;
    color: #bbbbbb;
    padding: .5rem;
    width: 100%;
    text-align: end;
}

.wrapper--sdg-development {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.125rem;
    margin: 1rem 0 0.5rem 0;
}

.wrapper--sdg-trend-label {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    border: .125rem solid hsl(0, 0%, 60%);
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    color:hsl(0, 0%, 25%);
}

.dark .wrapper--sdg-trend-label {
    color:hsl(0, 0%, 95%);
}

.sdg-trend-info {
    border: none;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
}

.sdg-trend-info svg {
    flex-shrink: 0;
}

.sdg-trend-info .icon:hover {
    fill: var(--theme-bg-highlight-hover);
}

.sdg-trend-label--positive {
    border-color: hsl(81, 71%, 34%); /* $success */
    background: hsl(81, 71%, 95%);
}

.sdg-trend-label--neutral {
    border-color: hsl(200, 99%, 35%); /* $info */
    background: hsl(200, 99%, 95%);
}

.sdg-trend-label--negative {
    border-color: hsl(4, 100%, 42%); /* $error */
    background: hsl(4, 100%, 95%);
}

.sdg-trend-label--undefined {
    border-color: hsl(0, 0%, 45%);
    background: hsl(0, 0%, 95%);
}

.sdg-trend-info .icon:hover {
    fill: var(--theme-bg-highlight-hover);
}

.dark .sdg-trend-label--positive {
    border-color: hsl(81, 46%, 55%); /* $success */
    background: hsl(81, 46%, 15%);
}

.dark .sdg-trend-label--neutral {
    border-color: hsl(204, 70%, 56%); /* $info */
    background: hsl(204, 70%, 15%);
}

.dark .sdg-trend-label--negative {
    border-color: hsl(12, 100%, 67%); /* $error */
    background: hsl(12, 100%, 15%);
}

.dark .sdg-trend-label--undefined {
    border-color: hsl(0, 0%, 45%);
    background: hsl(0, 0%, 10%);
}

.wrapper--sdg-card .content-area p:last-of-type {
    margin-bottom: 0.75rem;
}

.wrapper--sdg-card .list-links {
    margin: 0.5rem 0 0 0;
}

.wrapper--sdg-graph {
    margin-bottom: 1.25rem;
}

.dark .wrapper--sdg-graph div[data-type="legend"]{
    background: hsl(0, 0%, 0%);
}

.list--sdg {
    list-style: none;
}

.list--sdg li {
    border-top: .125rem solid hsl(0, 0%, 80%);
    padding: 1rem 0 0 0;
}

@media only all and (min-width: 36.875em) {

    .wrapper--sdg-trend-label {
        flex-direction: row;
    }

    .sdg-heading {
        flex-direction: row-reverse;
        justify-content: space-between;
    }

    .sdg-indicator-id {
        width: auto;
    }

}

/* Rahmen Ladeanimation */

.loading-spinner {
    width: 100%;
    min-height: 100%;
    position: relative;
    top: 0;
    left:0;
}

.loading-spinner__bg {
    width: 100%;
    height: 100%;
    min-height: var(--container-height);
    background-color: hsl(0, 0%, 95%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark .loading-spinner__bg {
    background-color: hsl(0, 0%, 25%);
}

/*Zusatzklasse für den Content, so dass er leicht verschwommen dargestellt wird. */
.content--blur {
    filter: blur(0.125rem);
}

body.custom_iframe_controller_is_sending #IMPERIA {
  filter: blur(2px);
}

:is(.sdg_bottom_axes, .sdg_left_axes) g { fill: inherit }
:is(.sdg_grid_lines, .sdg_cursor) g { stroke: inherit }

html:not(.dark) {
    .sdg_bottom_axes { fill: hsl(0, 0%, 10%) }
    .sdg_left_axes { fill: hsl(0, 0%, 10%) }
    .sdg_grid_lines { stroke: hsl(81, 71%, 34%) }
    .sdg_cursor { stroke: rgb(223, 133, 30) }
    .sdg_legend_container {
        [aria-checked="true"] {
            text { fill: (0, 0%, 10%) } /* text */
            .legend_icon use { fill: (0, 0%, 10%) } /* icon */
        }
        [aria-checked="false"] {
            text { fill: hsl(0, 0%, 40%) } /* text */
            :has(rect) { g { fill: inherit } fill: hsl(0, 0%, 40%) } /* icon background */
        }
    }
}

html.dark {
    .sdg_bottom_axes { fill: hsl(0, 0%, 100%) }
    .sdg_left_axes { fill: hsl(0, 0%, 100%) }
    .sdg_grid_lines { stroke: hsl(120, 100%, 80%) }
    .sdg_cursor { stroke: hsl(32, 100%, 84%) }
    .sdg_legend_container {
        [aria-checked="true"] {
            text { fill: white } /* text */
            .legend_icon use { fill: white } /* icon */
        }
        [aria-checked="false"] {
            text { fill: hsl(0, 0%, 70%) } /* text */
            :has(rect) { g { fill: inherit } fill: hsl(0, 0%, 70%) } /* icon background */
        }
    }
}