.PerformanceOverTime {

    &-hero {
        margin-bottom: 1rem;

        .MetricsHero {
            display: flex;
            flex-direction: row;
        }

        .LoaderWrapper-item,
        .Metric {
            align-items: center;
            display: flex;
            height: 35px;
            justify-content: center;
            margin: 0;
            min-width: 150px;
            padding-right: 2rem;
        }

        .LoaderWrapper .LoaderWrapper-item:first-child {
            padding-left: 2rem;
        }

        .LoaderWrapper-item + .LoaderWrapper-item,
        .Metric + .Metric {
            padding-left: 2rem;

            @include divider();
        }
    }

    &-chart {
        margin-bottom: 2rem;
    }

    &-table {
        tbody > tr > td {
            vertical-align: middle;
        }
        tbody > tr > td:first-child {
            width: 15px;
        }
        tbody > tr > td:nth-child(2) {
            width: 30%;
        }
    }

    &-empty {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;

        & > .Outline {
            margin: 0 auto;
        }
        &-text {
            color: var(--gray-500);
            margin: 1rem auto;
        }
    }
}

.pot-metric-select {
    width: 18rem;
}