/**
 * Radio Social Login - front end styles.
 *
 * Written to sit politely inside whatever theme is active rather than to
 * impose a look of its own. Sizes are in rem so they follow the theme's
 * type scale, and the only colors hard coded here are the brand colors
 * each service requires, which are fixed by their own brand guidelines
 * and are the same in light and dark mode by design.
 *
 * Everything else reads from custom properties, so a theme can restyle
 * the block by redefining those rather than by fighting with overrides.
 */

.rsl-block {
	--rsl-radius: 4px;
	--rsl-gap: 0.6rem;
	--rsl-border: rgba(0, 0, 0, 0.16);
	--rsl-muted: rgba(0, 0, 0, 0.62);
	--rsl-panel: rgba(0, 0, 0, 0.03);

	margin: 0 0 1.75rem;
}

/*
 * Dark mode. The block picks this up from the visitor's own system
 * setting, so it does not look like a pale rectangle pasted into a dark
 * theme. A theme that toggles dark mode with a data-theme attribute on
 * the root element gets the same treatment.
 */
@media (prefers-color-scheme: dark) {

	:root:not([data-theme="light"]) .rsl-block {
		--rsl-border: rgba(255, 255, 255, 0.22);
		--rsl-muted: rgba(255, 255, 255, 0.7);
		--rsl-panel: rgba(255, 255, 255, 0.05);
	}
}

:root[data-theme="dark"] .rsl-block {
	--rsl-border: rgba(255, 255, 255, 0.22);
	--rsl-muted: rgba(255, 255, 255, 0.7);
	--rsl-panel: rgba(255, 255, 255, 0.05);
}

.rsl-heading {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.35rem;
}

.rsl-intro {
	color: var(--rsl-muted);
	font-size: 0.9rem;
	margin: 0 0 0.9rem;
}

.rsl-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rsl-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Each button is allowed to grow to fill a row but never to shrink below
 * a readable width. On a phone that means one button per line; on a wide
 * screen they sit side by side. No media query needed, and it adapts to
 * however many services the site owner switched on rather than to a
 * count guessed in advance.
 */
.rsl-button-item {
	flex: 1 1 15rem;
	margin: 0;
	max-width: 100%;
	min-width: 0;
	position: relative;
}

.rsl-button {
	align-items: center;
	background: #fff;
	border: 1px solid var(--rsl-border);
	border-radius: var(--rsl-radius);
	box-sizing: border-box;
	color: #1f1f1f;
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	gap: 0.6rem;
	justify-content: center;
	line-height: 1.2;
	/* 44px minimum, which is the touch target size both Apple and
	   Google settle on. */
	min-height: 44px;
	padding: 0.65rem 1rem;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

.rsl-button:hover,
.rsl-button:focus-visible {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
	filter: brightness(0.96);
	text-decoration: none;
}

.rsl-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.rsl-button-icon {
	display: inline-flex;
	flex: 0 0 auto;
	height: 18px;
	width: 18px;
}

.rsl-button-icon svg {
	display: block;
	height: 100%;
	width: 100%;
}

/* A long translated label wraps rather than widening the button. */
.rsl-button-text {
	min-width: 0;
	overflow-wrap: break-word;
}

/*
 * Brand colors. These are the values each service publishes in its own
 * brand guidance, and using anything else risks a review rejection, so
 * they are deliberately literal rather than themeable.
 */
.rsl-button-google {
	background: #fff;
	border-color: #dadce0;
	color: #1f1f1f;
}

.rsl-button-facebook {
	background: #1877f2;
	border-color: #1877f2;
	color: #fff;
}

.rsl-button-x {
	background: #000;
	border-color: #000;
	color: #fff;
}

.rsl-button-wordpress {
	background: #3499cd;
	border-color: #3499cd;
	color: #fff;
}

.rsl-button-bluesky {
	background: #0085ff;
	border-color: #0085ff;
	color: #fff;
}

.rsl-button-primary {
	background: #1f1f1f;
	border-color: #1f1f1f;
	color: #fff;
}

/*
 * The Bluesky panel.
 *
 * Open by default so the form still works with JavaScript switched off.
 * The script adds .rsl-has-js to the block on load, and only then does
 * the collapsed state apply. Progressive enhancement in the honest
 * direction: no script means more visible, not less.
 */
.rsl-bluesky-panel {
	background: var(--rsl-panel);
	border: 1px solid var(--rsl-border);
	border-radius: var(--rsl-radius);
	margin-top: 0.6rem;
	padding: 1rem;
}

.rsl-has-js .rsl-bluesky-panel {
	display: none;
}

.rsl-has-js .rsl-toggle[aria-expanded="true"] + .rsl-bluesky-panel {
	display: block;
}

.rsl-field {
	margin: 0 0 0.85rem;
}

.rsl-field label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

.rsl-field input {
	border: 1px solid var(--rsl-border);
	border-radius: var(--rsl-radius);
	box-sizing: border-box;
	/*
	 * 16px is not a style choice. iOS Safari zooms the page in when a
	 * focused field renders below 16px and does not zoom back out
	 * afterwards, which is jarring in the middle of signing in.
	 */
	font-size: 16px;
	min-height: 44px;
	padding: 0.55rem 0.7rem;
	width: 100%;
}

.rsl-help {
	color: var(--rsl-muted);
	font-size: 0.85rem;
	margin: 0 0 0.85rem;
}

.rsl-submit {
	margin: 0;
}

.rsl-submit .rsl-button {
	width: auto;
}

/*
 * Notices left behind by a failed or cancelled sign in.
 *
 * A notice can appear on its own, above post content, with no .rsl-block
 * around it, so it declares the radius itself. A custom property is only
 * visible to the element it is declared on and that element's
 * descendants, and a var() that resolves to nothing takes the whole
 * declaration down with it.
 */
.rsl-notice {
	border-left: 4px solid;
	border-radius: 4px;
	margin: 0 0 1.25rem;
	padding: 0.85rem 1rem;
}

.rsl-notice p {
	margin: 0;
}

.rsl-notice-error {
	background: rgba(214, 54, 56, 0.08);
	border-color: #d63638;
}

.rsl-notice-info {
	background: rgba(0, 0, 0, 0.05);
	border-color: currentColor;
}

/*
 * The WordPress login screen.
 *
 * This block renders in the login footer, which sits outside the #login
 * card, so it gets the card's own width and centring rather than
 * inheriting them. 320px matches core's login form width.
 */
.rsl-context-login {
	margin: 0 auto 1.5rem;
	max-width: 320px;
	padding: 0 24px;
	width: 100%;
}

.rsl-context-login .rsl-heading {
	text-align: center;
}

.rsl-context-login .rsl-button-item {
	flex: 1 1 100%;
}

.rsl-complete-email {
	margin: 2rem 0;
	max-width: 32rem;
}

@media (prefers-reduced-motion: reduce) {

	.rsl-button {
		transition: none;
	}
}