src/static/scripts/components/misc/markdownForm/_markdownForm.scss
@use "../../../../style/vars";

.markdownForm {
	display: block;
	position: relative;

	> * {
		display: block;
	}

	.textArea {
		background: vars.$background-el2;
		border: 1px solid vars.$border-color;
		border-radius: 1rem;
		position: relative;

		> * {
			display: block;
			padding: .5rem;
		}

		.rawTextEditor {
			--textarea-height: 5rem;
			width: 100%;
			min-height: 5rem;
			height: var(--textarea-height);
			transition: all .125s ease, height .05s linear;
			resize: none;
			font-family: 'Roboto Mono', monospace;
			font-weight: 400;

			&.shadow {
				visibility: hidden;
				position: absolute;
			}
		}

		.markdownPreview {
			border-top: 1px solid vars.$border-color;
			line-break: anywhere;

			&::before {
				content: "Markdown Preview (Experimental):";
				display: block;
				font-size: 0.8em;
			}

			&:empty {
				display: none;
			}

			> :last-child {
				margin-block-end: 1em;
			}
		}

		.currentUserDisplay {
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}


	> .buttonsWrapper {
		display: flex;
		justify-content: flex-end;
		gap: .5rem;
		margin: .5rem 0;

		> button {
			width: max-content;
			padding: .25rem .5rem;
			border-radius: 1.5rem;
			transition: all .25s ease;
			--btn-color: none;
			--btn-text-color: vars.$text-color;
			border: 2px solid var(--btn-color);

			&:disabled {
				filter: grayscale(.75) !important;
			}

			&:hover {
				color: var(--btn-color);
			}

			&:active {
				background: var(--btn-color);
				color: var(--btn-text-color);
			}

			&.submitBtn {
				--btn-color: #{vars.$primary-contrast};
				--btn-text-color: #{vars.$text-on-primary};
			}

			&.cancelBtn {
				--btn-color: #{vars.$cancel-btn-bg};
			}
		}
	}
}
