@use "~@wordpress/base-styles/variables" as variables;
@use "~@wordpress/base-styles/colors" as colors;

.enable-responsive-image__source {

	legend {
		font-size: variables.$font-size-x-small;
		font-weight: 499;
		text-transform: uppercase;
		display: block;
		margin-bottom: variables.$grid-unit-10;
	}

	hr {
		margin: variables.$grid-unit-20 0 0;
		border-color: colors.$gray-200;
	}
}

.enable-responsive-image__notice {
	grid-column: 1 / -1;
}

.enable-responsive-image__add-source {
	justify-content: center;
	grid-column: 1 / -1;
}

.enable-responsive-image__container {
	position: relative;

	&:hover,
	&:focus,
	&:focus-within {

		.enable-responsive-image__movers,
		.enable-responsive-image__actions {
			opacity: 1;
		}
	}
}

.enable-responsive-image__toggle,
.enable-responsive-image__preview {
	width: 100%;
	padding: 0;
	box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
	overflow: hidden;
	display: flex;
	justify-content: center;
	height: 150px;
	background-color: colors.$gray-100;

	@media not (prefers-reduced-motion) {
		transition: all 0.1s ease-out;
	}
}

.enable-responsive-image__preview {
	height: auto;
}

.enable-responsive-image__toggle {
	border-radius: variables.$radius-small;

	&:hover {
		background: colors.$gray-300;
		color: colors.$gray-900;
	}
}

.enable-responsive-image__movers {
	top: 0;
	opacity: 0;
	right: 0;
	padding: variables.$grid-unit-10;
	position: absolute;

	@media not (prefers-reduced-motion) {
		transition: opacity 50ms ease-out;
	}
}

.enable-responsive-image__mover {
	backdrop-filter: blur(16px) saturate(180%);
	background: rgba(colors.$white, 0.75);
}

.enable-responsive-image__actions {
	bottom: 0;
	opacity: 0;
	padding: variables.$grid-unit-10;
	position: absolute;

	@media not (prefers-reduced-motion) {
		transition: opacity 50ms ease-out;
	}
}

.enable-responsive-image__action {
	backdrop-filter: blur(variables.$grid-unit-20) saturate(180%);
	background: rgba(colors.$white, 0.75);
	flex-grow: 1;
	justify-content: center;
}

.enable-responsive-image__url {
	font-size: variables.$font-size-small;
	word-break: break-all;
}