#ingame_HUD_Statistics {
    .content {
        @include S(width, 500px);
    }

    .filterHeader {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        justify-items: end;

        button {
            @include S(height, 20px);
            @include S(padding, 1px, 10px);
            border: 0;
            box-shadow: none;
            @include IncreasedClickArea(1px);
            @include S(min-width, 30px);
            color: #fff;
            opacity: 0.25;
            @include S(border-radius, $globalBorderRadius);

            border-radius: 0;
            &:first-child {
                @include S(border-top-left-radius, $globalBorderRadius);
                @include S(border-bottom-left-radius, $globalBorderRadius);
            }

            &:last-child {
                @include S(border-top-right-radius, $globalBorderRadius);
                @include S(border-bottom-right-radius, $globalBorderRadius);
            }

            &.displayIcons,
            &.displayDetailed,
            &.displaySorted,
            &.displayIterateUnit {
                background: transparent center center / #{D(15px)} no-repeat;
            }

            &.displayDetailed {
                background-image: uiResource("icons/display_list.png");
            }

            &.displayIcons {
                background-image: uiResource("icons/display_icons.png");
                background-size: #{D(11.5px)};
            }

            &.displayDetailed {
                @include S(border-top-left-radius, $globalBorderRadius);
                @include S(border-bottom-left-radius, $globalBorderRadius);
            }

            &.displaySorted {
                background-image: uiResource("icons/display_sorted.png");
                background-size: #{D(11.5px)};
                margin-right: 5px;
                @include S(border-top-right-radius, $globalBorderRadius);
                @include S(border-bottom-right-radius, $globalBorderRadius);

                @include S(padding, 1px, 0);
            }

            &.displayIterateUnit {
                background-image: uiResource("icons/toggle_unit.png");
                opacity: 0.8;
                @include S(padding, 1px, 0);
            }

            background-color: #44484a !important;
            transition: opacity 0.2s ease-in-out;

            @include DarkThemeOverride {
                background-color: lighten($darkModeControlsBackground, 10) !important;
            }
        }

        .filtersDataSource,
        .filtersDisplayMode {
            display: flex;
            padding: 0;
            margin: 0;

            :first-child {
                margin-left: 0 !important;
            }
            :last-child {
                margin-right: 0 !important;
            }
        }
    }

    .sourceExplanation {
        @include SuperSmallText();
        @include S(margin-top, 5px);
        color: #aaa;
    }

    .content {
        @include S(margin-top, 10px);
        @include S(height, 350px);
        overflow-y: scroll;
        display: flex;
        flex-direction: column;

        justify-content: flex-start;

        @include S(padding-right, 4px);

        > .noEntries {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            @include PlainText;
            color: #aaa;
        }

        > div {
            background: #f4f4f4;
            @include S(margin-bottom, 4px);
            display: grid;
            @include S(border-radius, $globalBorderRadius);

            grid-template-columns: 1fr auto;
            @include S(padding, 5px);
            &:last-child {
                margin-bottom: 0;
            }

            &.pinned {
                background: #e3e5e9;
            }

            @include DarkThemeOverride {
                background: $darkModeControlsBackground;

                &.pinned {
                    background: mix($darkModeControlsBackground, $colorBlueBright, 90%);
                }
            }

            canvas.icon {
                grid-column: 1 / 2;
                grid-row: 1 / 2;
                @include S(width, 40px);
                @include S(height, 40px);
            }

            .counter {
                @include SuperSmallText;
                @include S(padding, 0, 3px);
            }
        }
    }

    .dialogInner {
        &[data-displaymode="detailed"] .displayDetailed,
        &[data-displaymode="icons"] .displayIcons,
        &[data-sorted="true"] .displaySorted,
        &[data-datasource="produced"] .modeProduced,
        &[data-datasource="delivered"] .modeDelivered,
        &[data-datasource="stored"] .modeStored {
            opacity: 1;
        }

        &[data-displaymode="icons"] .content.hasEntries {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-auto-rows: #{D(73px)};
            align-items: flex-start;
            @include S(grid-column-gap, 3px);
            > div {
                @include S(grid-row-gap, 5px);
                @include S(height, 60px);
                grid-template-columns: 1fr;
                grid-template-rows: 1fr auto;
                justify-items: center;
                align-items: center;

                .counter {
                    grid-column: 1 / 2;
                    grid-row: 2 / 3;
                    justify-self: end;
                    color: #55595a;

                    @include DarkThemeOverride {
                        color: #aaa;
                    }
                }
            }
        }
        &[data-displaymode="detailed"] .content.hasEntries {
            > div {
                @include S(padding, 10px);
                @include S(height, 40px);
                grid-template-columns: auto 1fr auto;
                @include S(grid-column-gap, 15px);

                .counter {
                    grid-column: 3 / 4;
                    grid-row: 1 / 2;
                    @include Heading;
                    align-self: center;
                    text-align: right;
                    color: #55595a;

                    @include DarkThemeOverride {
                        color: #aaa;
                    }
                }

                canvas.graph {
                    @include S(width, 270px);
                    @include S(height, 40px);
                    @include S(border-radius, 0, 0, 2px, 2px);
                    $color: rgba(0, 10, 20, 0.04);
                    // background: $color;
                    border: #{D(4px)} solid transparent;
                    // @include S(border-width, 1px, 0, 1px, 0);
                    @include S(margin-top, -3px);
                }
            }
        }
    }
}