@import "vars";

.editor {
	.btn-group {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: flex-end;

		.filler {
			flex-grow: 1;
		}
		button {
			/* This centers the 20x20 SVG in the button */
			padding: 6px;
			background-color: var(--background);

			&:hover {
				background: var(--background-hover);
			}

			& > svg {
				width: 20px;
				height: 20px;

				& > path, & > rect {
					fill: var(--icons);
				}
			}
		}

		button, .separator {
			margin: 0 8px 8px 0;
			height: 32px;

			position: relative;
		}
		& > a {
			margin: 0 0 8px 0;
		}

		// From gitea
		.separator {
			display: inline-block;
			width: 0;
			border-left: 1px solid #d9d9d9;
			border-right: 1px solid #fff;
			color: transparent;
			text-indent: -10px;
		}
	}

	textarea {
		min-height: 15rem;
	}

	#editor_content_preview {
		padding: 5px;
		margin-top: 10px;
		border: var(--border);
		background-color: rgba(0, 0, 0, 0.2);
	}

	.modal {
		position: absolute;
		left: 0px;
		width: auto;
		min-width: 30vw;
		text-align: left;
		right: inherit;

		@media screen and (max-width: @tiny) {
			width: 80vw;
			position: fixed;
			left: 50vw;
			transform: translateX(-50%);
			top: 50vh;
		}

		background: var(--background-hover);
		border: var(--border);
		color: var(--text);
		padding: .2rem;
		top: 3.2rem;
		z-index: 100;
		list-style-position: initial;
		list-style-type: none;

		& > div {
			margin: 0.8rem;
			margin-top: 0.4rem;
			margin-bottom: 1rem;

			label {
				margin-top: 0.4rem;
			}
		}
	}
}