@layer components {
    .pricing-currency {
            display: flex;
            justify-content: center;
            margin-top: 0.25rem;
        }

    .pricing-currency__control {
            align-items: center;
            background: var(--dashboard-color-pill);
            border-radius: var(--dashboard-radius-pill);
            display: inline-flex;
            gap: 0.125rem;
            padding: 0.25rem;
        }

    .pricing-currency__button {
            border-radius: var(--dashboard-radius-pill);
            color: var(--dashboard-color-text-muted);
            font-size: 0.875rem;
            font-weight: 720;
            line-height: 1;
            min-height: 2.25rem;
            padding: 0 1rem;
        }

    .pricing-currency__button:hover {
            color: var(--dashboard-color-text);
        }

    .pricing-currency__button--active {
            background: var(--dashboard-color-surface);
            color: var(--dashboard-color-text);
        }
}