/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-red-block-red-orbital {
	height: auto;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 2px;

	.orbital-view {
		position: relative;
		width: 80vw;
		max-width: 100%;
		height: 80vh;
	}

	.orbiter-bg {
		position: absolute;
		inset: 0;
		border-radius: 50%;
	}

	.feature {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;

		figure {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		img {
			width: 75%;
			height: 75%;
			object-fit: contain;
		}

		& > * {
			position: absolute;
			inset: 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 0;

			transition: opacity var(--duration__feature-hover);

			&:nth-child(1) {
				opacity: 1;
			}

			&:nth-child(2) {
				opacity: 0;
			}
		}

		&:hover {
			& > * {
				&:first-child {
					opacity: 0;
				}

				&:last-child {
					opacity: 1;
				}
			}
		}
	}
}

.block-list {
	margin-top: 0;
}

#red-orbital-controls {
	.row-inner-imgs {
		border-top: 1px solid #e0e0e0;
		margin-top: 1.5em;
		padding-top: 0.5em;
	}
	.img-selector {
		box-shadow: inset 0 0 0 1px #e0e0e0;

		img {
			margin: 0 0 6px 0;
			border: 1px solid #e0e0e0;
			padding: 2px;
		}

		.remove-img {
			position: absolute;
			top: 15px;
			left: 15px;
			min-width: auto;
			box-shadow: none;
			background-color: transparent;
		}

		.components-placeholder__label {
			display: none;
		}

		.components-placeholder__fieldset {
			display: flex;
			justify-content: flex-start;
			flex-direction: row;
			align-items: center;

			button,
			input {
				margin: 0 12px 0 0;
			}
		}
	}
}