.cld-use-location {
	align-items: center;
	background: var(--cld-surface);
	border: 1px solid var(--cld-accent);
	border-radius: 8px;
	color: var(--cld-accent);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 700;
	gap: 6px;
	justify-content: center;
	min-height: 44px;
	padding: 8px 12px;
	white-space: nowrap;
}

.cld-use-location:hover,
.cld-use-location:focus-visible {
	background: var(--cld-surface-alt);
	border-color: var(--cld-accent-hover);
	color: var(--cld-accent-hover);
}

.cld-use-location span {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	margin: 0;
	text-transform: none;
}

.cld-use-location svg {
	flex: 0 0 auto;
}

.cld-use-location:disabled {
	cursor: wait;
}

@container cld-directory (max-width: 650px) {
	.cld-location-input {
		flex-wrap: wrap;
	}

	.cld-use-location {
		flex: 1 1 100%;
	}
}

@container cld-directory (max-width: 430px) {
	.cld-location-input input,
	.cld-find {
		flex: 1 1 100%;
		width: 100%;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 760px) {
		.cld-location-input {
			flex-wrap: wrap;
		}

		.cld-use-location {
			flex: 1 1 100%;
		}
	}

	@media (max-width: 520px) {
		.cld-location-input input,
		.cld-find {
			flex: 1 1 100%;
			width: 100%;
		}
	}
}