/* Scoped overrides for remote_casinos admin web components.
 *
 * Wagtail's panel/form layout styles `fieldset > button` and `fieldset svg`
 * to fill their container, which would make our buttons render full-width
 * with bloated icons. Constrain layout + icon size here.
 *
 * <remote-casinos-sync-trigger>  — two buttons inline (sync + full-refresh)
 * <remote-casinos-test-connection> — single button with status pill stacked
 *   ABOVE so the result reads top-down. */

remote-casinos-sync-trigger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

remote-casinos-test-connection {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

remote-casinos-sync-trigger > button,
remote-casinos-test-connection > button {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

remote-casinos-sync-trigger > button .icon,
remote-casinos-test-connection > button .icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.remote-casinos-sync-status {
    font-size: 0.875rem;
}

.remote-casinos-sync-status[data-state="ok"] {
    color: var(--w-color-positive-100, #207020);
}

.remote-casinos-sync-status[data-state="error"] {
    color: var(--w-color-critical-200, #cd3238);
}