@layer components {
    .value-overview {
            display: flex;
            flex-direction: column;
        }

    .value-overview__top {
            display: grid;
            gap: 1rem;
        }

    .value-overview__summary {
            align-items: baseline;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

    .value-overview__amount {
            color: var(--dashboard-color-text);
            font-size: 1.875rem;
            font-weight: 650;
            line-height: 2.25rem;
        }

    .value-overview__return {
            align-items: center;
            display: flex;
            font-size: 1rem;
            font-weight: 400;
            gap: 0.25rem;
            line-height: 1.5rem;
            margin-top: 0.5rem;
            white-space: nowrap;
        }

    .value-overview__return--positive {
            color: var(--dashboard-color-positive);
        }

    .value-overview__return--negative {
            color: var(--dashboard-color-negative);
        }

    .value-overview__chart {
            flex-grow: 1;
            margin-top: 2rem;
        }

    .value-overview__empty {
            color: var(--dashboard-color-text-muted);
            font-size: 1rem;
            line-height: 1.5rem;
            padding: 2.5rem var(--dashboard-section-padding-x) 1.25rem;
            text-align: center;
        }

    @media (min-width: 48rem) {
        .value-overview__top {
                    align-items: flex-start;
                    display: flex;
                    justify-content: space-between;
                }
    }

    @media (min-width: 48rem) {
        .value-overview__amount {
                    font-size: 3rem;
                    line-height: 1;
                }
    }

    @media (min-width: 48rem) {
        .value-overview__return {
                    font-size: 1.875rem;
                    line-height: 2.25rem;
                }
    }
}