.dt-ui-replyWidget {
	margin-bottom: 1em;
	position: relative;
	clear: both;

	> .oo-ui-textInputWidget {
		max-width: none;

		.oo-ui-inputWidget-input {
			line-height: 1.5em;
			overflow-y: hidden;
		}
	}

	.ve-ui-targetToolbar > .oo-ui-toolbar-bar {
		background: none;
		box-shadow: none;
		border: 0;

		> .oo-ui-toolbar-actions {
			display: none;
		}
	}

	.oo-ui-toolbar-position-top .ve-ui-toolbarDialog-position-above {
		border-top: 0;

		.oo-ui-window-body {
			padding-left: 0;
			padding-right: 0;
		}
	}

	&-headerWrapper {
		display: flex;
		// Allow wrapping when the space is very narrow (mode switcher above toolbar)
		flex-wrap: wrap-reverse;
	}

	&-modeTabs {
		box-shadow: none;
		height: 3em;
		text-align: right;
		// Stretch to all available space
		flex-grow: 1;

		.oo-ui-tabOptionWidget:last-child {
			margin-right: 2px;
		}
	}

	&-actionsWrapper {
		margin-top: 0.5em;
		display: flex;
		// Allow wrapping when the space is very narrow (buttons above the footer text)
		flex-wrap: wrap-reverse;
		// When wrapping, align actions to the right
		justify-content: flex-end;
	}

	&-actions {
		// Add spacing before the footer when wrapping
		margin-bottom: 0.5em;
		margin-left: 3em;
		white-space: nowrap;
	}

	&-footer {
		// Preferred width; if there isn't enough space, this wraps under the actions
		flex-basis: 20em;
		// Stretch to all available space
		flex-grow: 1;
		font-size: 0.75em;
		color: #54595d;

		> p {
			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	&-preview {
		background: #f6f6f6;
		padding: 0.5em 1em;

		&:empty {
			height: 0;
			padding: 0;
			overflow: hidden;
		}

		&:before {
			content: attr( data-label );
			color: #808080;
		}

		> .mw-parser-output {
			margin-left: -1.6em;
		}
	}

	&-anonWarning,
	&-advanced {
		&.oo-ui-messageWidget-block {
			padding: 8px 12px;
		}
	}

	&-captcha {
		margin-top: 0.5em;
	}

	&-error {
		margin-bottom: 0.5em;
	}

	&-anonWarning {
		margin-bottom: 0.5em;
		display: flex;
		align-items: center;
		// Allow wrapping when the space is very narrow (buttons below the warning text)
		flex-wrap: wrap;
		// When wrapping, align actions to the right
		justify-content: flex-end;

		&.oo-ui-messageWidget-block {
			> .oo-ui-iconElement-icon {
				background-position: center center;
				transform: scale( 1.5 );
				transform-origin: 0 center;
				left: 1em;
			}
		}

		> .oo-ui-labelElement-label {
			flex-grow: 1;
			flex-basis: 20em;
			margin-left: 3em;
		}

		.dt-ui-replyWidget-actions {
			// Fix alignment within message widget
			margin-top: 0.5em;
		}
	}

	&-editSummaryField.oo-ui-labelElement {
		margin-top: 0;
	}

	&-editSummary {
		max-width: none;
	}

	&-advanced.oo-ui-element-hidden + .dt-ui-replyWidget-anonWarning {
		// Removing spacing between message widgets when the first is hidden
		margin-top: 0;
	}

	&-advancedToggle {
		font-size: 0.75em;

		.oo-ui-indicatorElement-indicator {
			min-width: auto;
		}

		.oo-ui-buttonElement-button {
			min-height: auto;
		}
	}

	&-checkboxes {
		float: right;
	}
}