/* Domain search. Colors come from the active theme's palette when available. */
.me-ds {
	--me-ink: var(--wp--preset--color--ink, #0f1c24);
	--me-chalk: var(--wp--preset--color--chalk, #f5f6f2);
	--me-signal: var(--wp--preset--color--signal, #f5c400);
	--me-slate: var(--wp--preset--color--slate, #2f4b5f);
	--me-line: color-mix(in srgb, var(--me-ink) 22%, transparent);
	max-width: 40rem;
}

.me-ds__label {
	display: block;
	font-weight: 800;
	font-size: 1.125rem;
	margin-block-end: 0.5rem;
}

.me-ds__controls {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.me-ds__input {
	flex: 1 1 14rem;
	min-width: 0;
	font: inherit;
	font-size: 1.125rem;
	padding: 0.75rem 1rem;
	color: var(--me-ink);
	background: #fff;
	border: 2px solid var(--me-ink);
	border-radius: 2px;
}

.me-ds__button {
	font: inherit;
	font-weight: 800;
	padding: 0.75rem 1.5rem;
	color: var(--me-ink);
	background: var(--me-signal);
	border: 2px solid var(--me-ink);
	border-radius: 2px;
	cursor: pointer;
}

.me-ds__button:disabled {
	opacity: 0.6;
	cursor: progress;
}

.me-ds__input:focus-visible,
.me-ds__button:focus-visible,
.me-ds__action:focus-visible {
	outline: 3px solid var(--me-slate);
	outline-offset: 2px;
}

.me-ds__hint {
	margin: 0.5rem 0 0;
	font-size: 0.9375rem;
	color: var(--me-slate);
}

.me-ds__status {
	margin-block-start: 1rem;
	min-height: 1.5em;
	font-weight: 600;
}

.me-ds__status--error {
	color: #8a1c1c;
}

.me-ds__results {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	border-block-start: 2px solid var(--me-ink);
}

.me-ds__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.25rem 1rem;
	align-items: center;
	padding: 0.75rem 0;
	border-block-end: 1px solid var(--me-line);
}

.me-ds__domain {
	font-weight: 800;
	font-size: 1.125rem;
	overflow-wrap: anywhere;
}

.me-ds__state {
	justify-self: end;
	font-size: 0.9375rem;
}

.me-ds__row--available .me-ds__state {
	font-weight: 800;
}

.me-ds__row--taken .me-ds__domain {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	opacity: 0.6;
}

.me-ds__price {
	grid-column: 1;
	font-size: 0.9375rem;
	color: var(--me-slate);
}

.me-ds__action {
	grid-column: 2;
	justify-self: end;
	font-weight: 800;
	color: var(--me-ink);
	background: var(--me-signal);
	padding: 0.5rem 1rem;
	text-decoration: none;
	border: 2px solid var(--me-ink);
	border-radius: 2px;
}

.me-ds__action:hover {
	background: var(--me-ink);
	color: var(--me-signal);
}

@media (max-width: 30rem) {
	.me-ds__button {
		flex: 1 1 100%;
	}
	.me-ds__row {
		grid-template-columns: 1fr;
	}
	.me-ds__state,
	.me-ds__action {
		justify-self: start;
		grid-column: 1;
	}
}