@layer components {
    .segmented-control,
        .dashboard-tab-list {
            align-items: center;
            background: var(--dashboard-color-pill);
            border: 0;
            border-radius: var(--dashboard-radius-pill);
            display: inline-flex;
            gap: 0.25rem;
            padding: 0.25rem;
        }

    .segmented-control__item,
        .dashboard-tab {
            background: transparent;
            border: 0;
            border-radius: var(--dashboard-radius-pill);
            color: var(--dashboard-color-text-muted);
            cursor: pointer;
            display: inline-flex;
            font-size: 0.875rem;
            font-weight: 650;
            line-height: 1.25rem;
            padding: 0.5rem 0.875rem;
            text-decoration: none;
            white-space: nowrap;
        }

    .segmented-control__item:hover,
        .dashboard-tab:hover {
            background: var(--dashboard-color-pill-hover);
            color: var(--dashboard-color-text);
        }

    .segmented-control__item:focus-visible,
        .dashboard-tab:focus-visible {
            box-shadow: 0 0 0 3px rgb(var(--dashboard-color-brand-rgb) / 0.18);
            outline: 2px solid rgb(var(--dashboard-color-brand-rgb) / 0.55);
            outline-offset: 2px;
        }

    .segmented-control__item--active,
        .dashboard-tab-active {
            background: var(--dashboard-color-text);
            color: #ffffff;
        }

    .segmented-control__item--active:hover,
        .dashboard-tab-active:hover {
            background: var(--dashboard-color-text);
            color: #ffffff;
        }

    .segmented-control--subtle,
        .segmented-control--subtle.dashboard-tab-list {
            background: transparent;
            gap: 0.125rem;
            padding: 0;
        }

    .segmented-control--subtle .segmented-control__item,
        .segmented-control--subtle .dashboard-tab {
            align-items: center;
            color: var(--dashboard-color-text-muted);
            display: inline-flex;
            justify-content: center;
            padding: 0.625rem 0.875rem;
        }

    .segmented-control--subtle .segmented-control__item:hover,
        .segmented-control--subtle .dashboard-tab:hover,
        .segmented-control--subtle .segmented-control__item--active,
        .segmented-control--subtle .dashboard-tab-active,
        .segmented-control--subtle .segmented-control__item--active:hover,
        .segmented-control--subtle .dashboard-tab-active:hover {
            background: var(--dashboard-color-pill);
            color: var(--dashboard-color-text);
        }
}