@import "variables";

.content-editor {
	margin-bottom: 20px;
	border-radius: 4px;
	border: 1px solid $color-purple-500;
	background-color: $color-white;
	color: $color-purple-900;
	min-width: 800px;
	max-height: 60vh;
	overflow: auto;

	.content-item {
		margin: 0 20px;
		background-color: $color-white;
		padding: 5px 10px;
		border-radius: $border-radius;
		font-size: 0.8rem;
	}
}

.select-file {
	> input[type="file"] {
		display: none;
	}
}

.preview-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-auto-rows: 150px;
	grid-gap: 10px;
	margin-bottom: 20px;

	> .image {
		position: relative;

		> img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		> label {
			> input[type="radio"] {
				display: none;

				+ span {
					position: absolute;
					width: 16px;
					height: 16px;
					border-radius: 50%;
					border: 2px solid $color-primary-2;
					background-color: $color-white;

					top: 4px;
					right: 4px;
				}

				&:hover {
					+ span {
						background-color: $color-primary-4;
					}
				}

				&:checked {
					+ span {
						&::before {
							content: "";
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							width: 8px;
							height: 8px;
							border-radius: 50%;
							background-color: $color-primary-2;
						}
					}
				}
			}
		}
	}
}