@layer components {
    .dashboard-primary-button {
            align-items: center;
            background: var(--dashboard-color-brand);
            border: 1px solid transparent;
            border-radius: var(--dashboard-radius-pill);
            box-shadow: none;
            color: #ffffff;
            display: inline-flex;
            font-size: 0.875rem;
            font-weight: 650;
            gap: 0.375rem;
            justify-content: center;
            min-height: 2.5rem;
            padding: 0.625rem 1rem;
            text-decoration: none;
            white-space: nowrap;
        }

    .dashboard-primary-button:focus-visible {
            background: var(--dashboard-color-brand-hover);
            box-shadow: 0 0 0 4px rgb(var(--dashboard-color-brand-rgb) / 0.55);
            outline: 2px solid #ffffff;
            outline-offset: 2px;
        }
}