@layer components {
    .button--block {
            width: 100%;
        }

    .button--danger {
            background: #fee2e2;
            color: #991b1b;
        }

    .button--danger:hover {
            background: #fecaca;
        }

    .button {
            align-items: center;
            border: 1px solid transparent;
            border-radius: var(--dashboard-radius-pill);
            cursor: pointer;
            display: inline-flex;
            font-size: 0.875rem;
            font-weight: 650;
            gap: 0.375rem;
            justify-content: center;
            line-height: 1.25rem;
            min-height: 2.5rem;
            padding: 0.625rem 1rem;
            text-decoration: none;
            white-space: nowrap;
        }

    .button--primary {
            background: var(--dashboard-color-brand);
            color: #ffffff;
        }

    .button--primary:hover {
            background: var(--dashboard-color-brand-hover);
        }

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

    .button--secondary:focus-visible,
        .button--ghost:focus-visible,
        .button--danger:focus-visible {
            outline: 2px solid var(--dashboard-color-brand);
            outline-offset: 2px;
            box-shadow: 0 0 0 3px rgb(var(--dashboard-color-brand-rgb) / 0.16);
        }

    .button--primary:focus-visible {
            background: var(--dashboard-color-brand-hover);
        }

    .button--secondary {
            background: var(--dashboard-color-pill);
            color: var(--dashboard-color-text);
        }

    .button--secondary:hover {
            background: var(--dashboard-color-pill-hover);
        }

    .button--ghost {
            background: transparent;
            color: var(--dashboard-color-text-muted);
        }

    .button--ghost:hover {
            background: var(--dashboard-color-pill);
            color: var(--dashboard-color-text);
        }

    .button--icon {
            min-width: 2.5rem;
            padding: 0.625rem;
        }

    .button i,
        .button svg {
            flex-shrink: 0;
            height: 1rem;
            width: 1rem;
        }
}