.podcast-cover-image-setting__preview {
	position: relative;
	display: flex;
	float: left;
	margin: 0;
	text-align: center;
	border: 1px solid var(--color-neutral-10);
	cursor: pointer;
	height: 96px;
	width: 96px;

	&.is-transient .spinner {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: color-mix(in srgb, var(--color-surface) 75%, transparent);
	}
}

.podcast-cover-image-setting__img {
	align-self: center;
	background: color-mix(in srgb, var(--color-surface) 0%, transparent);
	position: relative;
	max-height: 100%;
	max-width: 100%;
	margin: 0 auto;

	.is-disabled & {
		opacity: 0.3;
	}
}

.podcast-cover-image-setting__placeholder {
	color: var(--color-text-subtle);
	display: block;
	font-size: $font-body-small;
	font-style: italic;
	font-weight: 400;
	margin: 0 7px;
	text-align: center;
	align-self: center;

	.is-disabled & {
		color: var(--color-neutral-20);
	}
}

.podcast-cover-image-setting {
	width: 208px;

	@include breakpoint-deprecated( ">960px" ) {
		width: 98px;
	}
}

.podcast-cover-image-setting__button {
	width: 98px;
	float: left;
	margin: 0 0 6px 12px;
	text-align: center;

	.is-disabled &:disabled {
		background-color: var(--color-neutral-0);
		border-color: var(--color-neutral-10);
		color: var(--color-neutral-20);
	}

	@include breakpoint-deprecated( ">960px" ) {
		margin: 6px 0 0;
	}
}
