@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__amount-label {
            color: var(--dashboard-color-text-muted);
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1rem;
        }

    .value-overview__return {
            margin-top: 0.5rem;
        }

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

    .value-overview__return--holding {
            display: flex;
            flex-wrap: wrap;
            font-size: 1rem;
            gap: 0.5rem;
            line-height: 1.5rem;
        }

    .value-overview__return-label {
            align-items: center;
            color: var(--dashboard-color-text-muted);
            display: inline-flex;
            font-size: 0.75rem;
            font-weight: 600;
            gap: 0.25rem;
            line-height: 1rem;
        }

    .value-overview__return-help {
            color: var(--dashboard-color-text-muted);
            cursor: help;
            display: inline-flex;
            flex-shrink: 0;
        }

    .value-overview__return-help:hover {
            color: var(--dashboard-color-text);
        }

    .value-overview__return-help svg {
            height: 0.75em;
            width: 0.75em;
        }

    .value-overview__controls {
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

    .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--portfolio {
                    font-size: 1.875rem;
                    line-height: 2.25rem;
                }
    }
}