@use "../../../../style/mixins";

:host {
	color: var(--main-text-color);

	h3 {
		margin-top: 0;
		padding-top: 0;
		text-align: center;
	}

	.preview {
		max-height: 180px;
		min-width: 100px;
		padding-left: 10px;
	}

	.inputs {
		display: flex;
		flex-direction: column;
		flex: 1;

		input {
			padding: 4px;
			font-size: 16px;
			margin-bottom: 8px;
		}
	}

	@include mixins.respond-to(tiny-down) {
		.preview {
			display: none;
		}
	}

	.section {
		display: flex;
	}

	.export {
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;

			label {
				vertical-align: middle;
				cursor: pointer;
			}

			input {
				cursor: pointer;
			}

			li + li {
				margin-left: 10px;
			}
		}

		.export-preview {
			margin-top: 16px;

			pre {
				white-space: pre-line;
				overflow-wrap: break-word;
				font-family: monospace;
				text-align: left;
				overflow: auto;
				min-height: 180px;
				max-height: 180px;
				font-size: 0.8em;
				line-height: 1em;
				background-color: black;
			}
		}

		button {
			padding: 8px 16px;
		}
	}

	.buttons {
		text-align: center;
		display: flex;
		flex-wrap: wrap;

		button {
			flex: 1;
			background-color: rgb(0 0 0 / 5%);
			background-image: none;
			border: 1px solid var(--dialog-border-color);
			cursor: pointer;
			color: var(--main-text-color);

			&:hover {
				color: var(--main-text-color-hover);
				background-color: rgb(0 0 0 / 10%);
				border: 1px solid var(--dialog-border-color-hover);
			}

			&.text-button {
				padding: 10px 16px;
			}

			&[disabled] {
				color: var(--text-disabled-color);
				cursor: default;
			}
		}
	}

}
