/* Design system v2 — button states (round 26, UIX-2).
   Colour, outline, opacity, filter, radius and transition only: no size or typography
   (UiV2NoSizeTest). States via :hover/:focus-visible/:active, aria-busy, :disabled/.disabled
   and data-sc-state="success|error". The busy ring itself lives in ui-loader.css (UIX-4). */

.siteclick-container .button {
    border-radius: var(--sc-radius-md);
    transition: background-color var(--sc-dur-fast) var(--sc-ease-out),
                color var(--sc-dur-fast) var(--sc-ease-out),
                box-shadow var(--sc-dur-fast) var(--sc-ease-out),
                opacity var(--sc-dur-fast) var(--sc-ease-out);
}
/* Busy ring ink for neutral variants; coloured variants keep the white default. */
.siteclick-container .button.button-grey,
.siteclick-container .button.button-secondary,
.siteclick-container .button.button-icon,
.siteclick-container .button.button-transparent {
    --sc-btn-ink: var(--sc-button-neutral-text);
}
/* Anchor for the result glyph; a button inside a field is already absolute. */
.siteclick-container .button[data-sc-state]:not(.siteclick-input-with-button .button) {
    position: relative;
}
.siteclick-container .button.button-small,
.siteclick-container .button.button-medium {
    border-radius: var(--sc-radius-sm);
}
.siteclick-container .button.button-large,
.siteclick-container .button.button-extralarge {
    border-radius: var(--sc-radius-md);
}

/* Hover + active per variant, both standalone and inside .siteclick-buttons. */
.siteclick-container .button.button-green:not(.button-transparent):hover,
.siteclick-container .button.button-green:not(.button-transparent):active,
.siteclick-container .button.button-success:not(.button-transparent):hover,
.siteclick-container .button.button-success:not(.button-transparent):active,
.siteclick-container .siteclick-buttons .button.button-green:hover,
.siteclick-container .siteclick-buttons .button.button-success:hover {
    background: var(--sc-button-success-bg-hover) !important;
    color: var(--sc-button-success-text) !important;
}
.siteclick-container .button.button-grey:not(.button-transparent):hover,
.siteclick-container .button.button-grey:not(.button-transparent):active,
.siteclick-container .button.button-secondary:not(.button-transparent):hover,
.siteclick-container .button.button-secondary:not(.button-transparent):active,
.siteclick-container .button.button-icon:not(.button-transparent):hover,
.siteclick-container .button.button-icon:not(.button-transparent):active,
.siteclick-container .siteclick-buttons .button.button-grey:hover,
.siteclick-container .siteclick-buttons .button.button-secondary:hover {
    background: var(--sc-button-neutral-bg-hover) !important;
    color: var(--sc-button-neutral-text-hover) !important;
}
.siteclick-container .button.button-blue:not(.button-transparent):hover,
.siteclick-container .button.button-blue:not(.button-transparent):active,
.siteclick-container .button.button-primary:not(.button-transparent):hover,
.siteclick-container .button.button-primary:not(.button-transparent):active,
.siteclick-container .siteclick-buttons .button.button-blue:hover,
.siteclick-container .siteclick-buttons .button.button-primary:hover {
    background: var(--sc-button-primary-bg-hover) !important;
    color: var(--sc-button-primary-text) !important;
}
.siteclick-container .button.button-red:not(.button-transparent):hover,
.siteclick-container .button.button-red:not(.button-transparent):active,
.siteclick-container .button.button-danger:not(.button-transparent):hover,
.siteclick-container .button.button-danger:not(.button-transparent):active,
.siteclick-container .siteclick-buttons .button.button-red:hover,
.siteclick-container .siteclick-buttons .button.button-danger:hover {
    background: var(--sc-button-danger-bg-hover) !important;
    color: var(--sc-button-danger-text) !important;
}
.siteclick-container .button.button-purple:not(.button-transparent):hover,
.siteclick-container .button.button-purple:not(.button-transparent):active,
.siteclick-container .siteclick-buttons .button.button-purple:hover {
    background: var(--sc-button-magic-bg-hover) !important;
    color: var(--sc-button-magic-text) !important;
}
.siteclick-container .button.button-dark:not(.button-transparent):hover,
.siteclick-container .button.button-dark:not(.button-transparent):active,
.siteclick-container .siteclick-buttons .button.button-dark:hover {
    background: var(--sc-color-black) !important;
    color: var(--sc-color-surface) !important;
}

.siteclick-container .button:active {
    filter: brightness(.94);
}

.siteclick-container .button:focus-visible {
    outline: none;
    box-shadow: var(--sc-ring) !important;
}

.siteclick-container .button.disabled,
.siteclick-container .button:disabled {
    opacity: .45;
    cursor: not-allowed;
}
/* A busy button is also disabled, but must read as loading, not as unavailable. */
.siteclick-container .button[aria-busy="true"]:disabled {
    opacity: 1;
    cursor: progress;
}

/* Loading: the label hides in place (width unchanged); UIX-4 draws the ring on ::after. */
.siteclick-container .button.button[aria-busy="true"] {
    color: transparent !important;
    pointer-events: none;
}

/* Success / error: the label morphs into a glyph for a moment (siteclickUi.flash). */
.siteclick-container .button.button[data-sc-state="success"],
.siteclick-container .button.button[data-sc-state="error"] {
    color: transparent !important;
    pointer-events: none;
}
.siteclick-container .button.button[data-sc-state="success"] {
    background: var(--sc-color-green) !important;
}
.siteclick-container .button.button[data-sc-state="error"] {
    background: var(--sc-color-danger) !important;
}
.siteclick-container .button[data-sc-state="success"]::after,
.siteclick-container .button[data-sc-state="error"]::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.siteclick-container .button[data-sc-state="success"]::after {
    content: '\e106';
    font-family: "siteclick" !important;
    color: var(--sc-button-success-text);
}
.siteclick-container .button[data-sc-state="error"]::after {
    content: '!';
    color: var(--sc-button-danger-text);
}