.istd-co-button {
    /* reset navigateur */
    appearance: none;
    font: inherit;

    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    /* interaction */
    cursor: pointer;
    user-select: none;
    text-decoration: none;

    /* shape */
    border-radius: var(--radius-sm, 4px);

    /* colors (via behaviors) */
    background-color: var(--button-bg, inherit);
    color: var(--button-text);
    border: 1px solid var(--button-border, transparent);

    padding: var(--button-padding-y) var(--button-padding-x);
    font-size: var(--button-font-size);

    /* animation */
    transition: background-color 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.istd-co-button:hover:not(:disabled) {
    background-color: var(--button-bg-hover);
    color: var(--button-text-hover);
    border-color: var(--button-border-hover);
}

.istd-co-button:active:not(:disabled) {
    background-color: color-mix(in srgb, var(--button-bg) 70%, black);
}

.istd-co-button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--button-bg) 60%, transparent);
}