.Graph {
    margin-top: 10px;
    position: relative;

    &-marker-line {
        stroke: var(--gray-800);
        stroke-width: 2;
    }

    &-indicator-container {
        .LoadingIndicator {
            background: var(--white);
            height: 80px;
            left: calc(50% - 130px);
            position: absolute;
            top: calc(50% - 50px);
            width: 260px;
        }
    }

    .Svg {
        border: 1px solid var(--gray-400);
        border-radius: 3px;
        display: block;
        margin-top: 10px;
        overflow: visible;

        &-track-data {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        .GridLine {
            fill: none;
            stroke: var(--gray-200);
            stroke-width: 1;
        }

        .HoverLine {
            stroke: var(--gray-500);
            stroke-width: 1;
        }

        .BorderLine {
            stroke: var(--gray-400);
        }

        .Yaxis-label {
            @extend .AxisLabel;

            transform: translate(10px, 3px);
        }

        /* stylelint-disable max-nesting-depth */
        .Xaxis {
            &-label {
                @extend .AxisLabel;

                transform: translate(-25px, -10px);
            }

            &-hover-date {
                font-size: 10px;
            }
        }

        .GraphLinestreamsFromCollection {
            @extend .GraphLine;

            stroke: $dark_cyan;
        }

        .CirclestreamsFromCollection {
            fill: $dark_cyan;
        }

        .GraphLinestreamsFromPassiveDiscovery {
            @extend .GraphLine;

            stroke: $dark_slate_blue;
        }

        .CirclestreamsFromPassiveDiscovery {
            fill: $dark_slate_blue;
        }

        .GraphLinestreamsFromActiveDiscovery {
            @extend .GraphLine;

            stroke: $medium_sea_green;
        }

        .CirclestreamsFromActiveDiscovery {
            fill: $medium_sea_green;
        }

        .GraphLinestreamsFromCollectionSas {
            @extend .GraphLine;

            stroke: $listeners_collection;
        }

        .CirclestreamsFromCollectionSas {
            fill: $listeners_collection;
        }

        .GraphLinestreamsFromPassiveDiscoverySas {
            @extend .GraphLine;

            stroke: $passive_discovery;
        }

        .CirclestreamsFromPassiveDiscoverySas {
            fill: $passive_discovery;
        }

        .GraphLinestreamsFromActiveDiscoverySas {
            @extend .GraphLine;

            stroke: $active_discovery;
        }

        .CirclestreamsFromActiveDiscoverySas {
            fill: $active_discovery;
        }

        .GraphLinesaves {
            @extend .GraphLine;

            stroke: $saves_to_collection;
        }

        .Circlesaves {
            fill: $saves_to_collection;
        }

        .GraphLineskips {
            @extend .GraphLine;

            stroke: $skip_rate;
        }

        .Circleskips {
            fill: $skip_rate;
        }

        .NoGraphData {
            color: var(--gray-700);
            font-size: 14px;
        }
    }

    .SvgSas {
        background-color: var(--white);
    }

    .IndicatorContainer {
        border: 1px solid var(--gray-400);
        border-radius: 3px;
        height: 100px;

        .LoadingIndicator {
            top: 50%;
        }
    }

    .HoverSpot {
        position: absolute;
        z-index: 100;
    }
}

.AxisLabel {
    fill: var(--gray-500);
    font-size: 10px;
    position: relative;
}

.GraphLine {
    fill: none;
    stroke-width: 2px;
}