/* Public button tokens may be set by a theme or inherited from a containing card. */
.site-button {
    --_site-button-background: var(--site-button-background, var(--_site-button-role-background));
    --_site-button-border-width: var(--site-button-border-width, var(--_site-button-role-border-width, 1px));

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--site-button-gap, var(--_site-button-size-gap, 0.5rem));
    min-inline-size: var(--site-button-min-width, 0);
    min-block-size: var(--site-button-min-height, 2.25rem);
    padding-block: var(--site-button-padding-block, var(--_site-button-size-padding-block, 0.5rem));
    padding-inline: var(--site-button-padding-inline, var(--_site-button-size-padding-inline, 1rem));
    background-color: var(--_site-button-background);
    color: var(--site-button-color, var(--_site-button-role-color));
    border: var(--_site-button-border-width) var(--site-button-border-style, solid) var(--site-button-border-color, var(--_site-button-role-border-color));
    border-top-width: var(--site-button-border-top-width, var(--_site-button-border-width));
    border-right-width: var(--site-button-border-right-width, var(--_site-button-border-width));
    border-bottom-width: var(--site-button-border-bottom-width, var(--_site-button-role-border-bottom-width, var(--_site-button-border-width)));
    border-left-width: var(--site-button-border-left-width, var(--_site-button-border-width));
    border-top-style: var(--site-button-border-top-style, var(--site-button-border-style, solid));
    border-right-style: var(--site-button-border-right-style, var(--site-button-border-style, solid));
    border-bottom-style: var(--site-button-border-bottom-style, var(--site-button-border-style, solid));
    border-left-style: var(--site-button-border-left-style, var(--site-button-border-style, solid));
    border-top-color: var(--site-button-border-top-color, var(--site-button-border-color, var(--_site-button-role-border-color)));
    border-right-color: var(--site-button-border-right-color, var(--site-button-border-color, var(--_site-button-role-border-color)));
    border-bottom-color: var(--site-button-border-bottom-color, var(--site-button-border-color, var(--_site-button-role-border-color)));
    border-left-color: var(--site-button-border-left-color, var(--site-button-border-color, var(--_site-button-role-border-color)));
    border-radius: var(--site-button-radius, var(--_site-button-role-radius, var(--radius-md, 0.375rem)));
    box-shadow: var(--site-button-shadow, none);
    font-family: var(--site-button-font-family, inherit);
    font-size: var(--site-button-font-size, var(--_site-button-size-font-size, 0.875rem));
    font-weight: var(--site-button-font-weight, 600);
    line-height: var(--site-button-line-height, 1.25);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.site-button--primary {
    --_site-button-role-background: var(--site-button-primary-background, var(--color-primary-600, #24539a));
    --_site-button-role-color: var(--site-button-primary-color, #fff);
    --_site-button-role-border-color: var(--site-button-primary-border-color, transparent);
    --_site-button-role-border-width: var(--site-button-primary-border-width, 1px);
    --_site-button-role-border-bottom-width: var(--site-button-primary-border-bottom-width, var(--site-button-border-width, var(--_site-button-role-border-width)));
    --_site-button-role-radius: var(--site-button-primary-radius, var(--radius-md, 0.375rem));
    --_site-button-role-hover-background: var(--site-button-primary-hover-background, color-mix(in srgb, var(--_site-button-background), #000 8%));
}

.site-button--secondary {
    --_site-button-role-background: var(--site-button-secondary-background, var(--color-white, #fff));
    --_site-button-role-color: var(--site-button-secondary-color, var(--color-ui-800, #1f2937));
    --_site-button-role-border-color: var(--site-button-secondary-border-color, var(--color-ui-300, #cbd5e1));
    --_site-button-role-border-width: var(--site-button-secondary-border-width, 1px);
    --_site-button-role-border-bottom-width: var(--site-button-secondary-border-bottom-width, var(--site-button-border-width, var(--_site-button-role-border-width)));
    --_site-button-role-radius: var(--site-button-secondary-radius, var(--radius-md, 0.375rem));
    --_site-button-role-hover-background: var(--site-button-secondary-hover-background, color-mix(in srgb, var(--_site-button-background), #000 8%));
}

.site-button--info {
    --_site-button-role-background: var(--site-button-info-background, var(--color-blue-700, #1d4ed8));
    --_site-button-role-color: var(--site-button-info-color, #fff);
    --_site-button-role-border-color: var(--site-button-info-border-color, transparent);
}

.site-button--success {
    --_site-button-role-background: var(--site-button-success-background, var(--color-green-700, #15803d));
    --_site-button-role-color: var(--site-button-success-color, #fff);
    --_site-button-role-border-color: var(--site-button-success-border-color, transparent);
}

.site-button--warning {
    --_site-button-role-background: var(--site-button-warning-background, var(--color-amber-300, #fcd34d));
    --_site-button-role-color: var(--site-button-warning-color, #422006);
    --_site-button-role-border-color: var(--site-button-warning-border-color, transparent);
}

.site-button--danger {
    --_site-button-role-background: var(--site-button-danger-background, var(--color-red-700, #b91c1c));
    --_site-button-role-color: var(--site-button-danger-color, #fff);
    --_site-button-role-border-color: var(--site-button-danger-border-color, transparent);
}

.site-button--ghost {
    --_site-button-role-background: var(--site-button-ghost-background, transparent);
    --_site-button-role-color: var(--site-button-ghost-color, var(--color-primary-700, #1d427b));
    --_site-button-role-border-color: var(--site-button-ghost-border-color, transparent);
}

.site-button--xs {
    --_site-button-size-padding-block: 0.25rem;
    --_site-button-size-padding-inline: 0.5rem;
    --_site-button-size-font-size: 0.75rem;
    --_site-button-size-gap: 0.25rem;
}

.site-button--sm {
    --_site-button-size-padding-block: 0.375rem;
    --_site-button-size-padding-inline: 0.75rem;
    --_site-button-size-gap: 0.375rem;
}

.site-button--lg,
.site-button--xl {
    --_site-button-size-padding-block: 0.75rem;
    --_site-button-size-padding-inline: 1.5rem;
    --_site-button-size-font-size: 1rem;
}

.site-button--xl {
    --_site-button-size-padding-inline: 2rem;
    --_site-button-size-font-size: 1.125rem;
}

.site-button__icon {
    flex: none;
    color: var(--site-button-icon-color, currentColor);
    font-size: var(--site-button-icon-size, 1em);
}

.site-button:not(:disabled, [aria-disabled="true"]):hover {
    background-color: var(--site-button-hover-background, var(--_site-button-role-hover-background, color-mix(in srgb, var(--_site-button-background), #000 8%)));
    color: var(--site-button-hover-color, var(--site-button-color, var(--_site-button-role-color)));
    border-top-color: var(--site-button-hover-border-top-color, var(--site-button-hover-border-color, var(--site-button-border-top-color, var(--site-button-border-color, var(--_site-button-role-border-color)))));
    border-right-color: var(--site-button-hover-border-right-color, var(--site-button-hover-border-color, var(--site-button-border-right-color, var(--site-button-border-color, var(--_site-button-role-border-color)))));
    border-bottom-color: var(--site-button-hover-border-bottom-color, var(--site-button-hover-border-color, var(--site-button-border-bottom-color, var(--site-button-border-color, var(--_site-button-role-border-color)))));
    border-left-color: var(--site-button-hover-border-left-color, var(--site-button-hover-border-color, var(--site-button-border-left-color, var(--site-button-border-color, var(--_site-button-role-border-color)))));
    box-shadow: var(--site-button-hover-shadow, var(--site-button-shadow, none));
}

.site-button:not(:disabled, [aria-disabled="true"]):active {
    background-color: var(--site-button-active-background, color-mix(in srgb, var(--_site-button-background), #000 16%));
    color: var(--site-button-active-color, var(--site-button-hover-color, var(--site-button-color, var(--_site-button-role-color))));
    box-shadow: var(--site-button-active-shadow, var(--site-button-hover-shadow, var(--site-button-shadow, none)));
}

.site-button:focus-visible {
    outline: var(--site-button-focus-width, 2px) var(--site-button-focus-style, solid) var(--site-button-focus-color, var(--color-primary-600, #24539a));
    outline-offset: var(--site-button-focus-offset, 2px);
}

.site-button:is(:disabled, [aria-disabled="true"]) {
    opacity: var(--site-button-disabled-opacity, 0.55);
    cursor: not-allowed;
}

@media (prefers-reduced-motion: no-preference) {
    .site-button {
        transition: var(--site-button-transition, background-color 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease);
    }
}