/*
 * Citizen
 *
 * SkinStyles for Extension:DiscussionTools
 * Module: ext.discussionTools.ReplyWidget
 * Version: REL1_39 1aae2cc
 *
 * Date: 2023-01-21
*/

@import '../../../resources/variables.less';

.ext-discussiontools-ui-replyWidget {
	&-footer {
		color: var( --color-base--subtle );
	}

	&-preview {
		border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
		background: var( --color-surface-2 );

		&::before {
			color: var( --color-base--subtle );
		}
	}

	&-modeTabs {
		.ext-discussiontools-ui-modeTab.oo-ui-optionWidget-highlighted:not( :hover ) {
			color: var( --color-primary );
			border-radius: var( --border-radius--small );
			box-shadow: inset 0 0 0 2px var( --color-primary );
		}

		.ext-discussiontools-ui-modeTab.oo-ui-widget-disabled {
			color: var( --color-primary );
			box-shadow: inset 0 0 0 2px var( --color-primary );
		}
	}
}

@media only screen and ( max-width: @width-breakpoint-tablet ) {
	.ext-discussiontools-ui-replyWidget {
		// HACK: Make the toolbar two line on mobile
		// So that they are not overlapping
		.ve-ui-targetToolbar > .oo-ui-toolbar-bar {
			padding-top: 42px;
			text-align: left;
		}
	}
}
