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

rich-text {
	display: flex;

	// Overrides to get the editor + toolbar to combine for 100% of the container.
	// Otherwise, the editor takes up 100% height but then overflows by the
	// height of the toolbar.
	flex-direction: column;
	position: relative;

	& > .ql-container {
		flex-grow: 1;
		height: auto;
	}

	// Overrides to use Mediafly fonts in the editor and toolbar.
	& > .ql-toolbar.ql-snow,
	& > .ql-container.ql-snow {
		font-family: @font-stack-main;
	}

	// By default only the editor is selectable, but we manually set focus in the
	// editor when the container is clicked. This override makes the hover
	// affordance consistent on the entire container.
	& > .ql-container:hover {
		cursor: text;
	}

	// Ensure the toolbar has a background so the icons are always visible
	.c-rich-text {
		background-color: #fff;
	}
}

// Quill thinks the Left Align button shows a dropdown box to show pick an alignment (see example at https://quilljs.com/docs/formats),
// so it is highlighted when any other alignment is selected, and isn't highlighted when none is selected (i.e. we're defaulting to left align).
// Override the styles to reverse that.
.c-rich-text.ql-toolbar .ql-align:not([value]) {
	.ql-stroke {
		stroke: #06c;
	}

	&.ql-active .ql-stroke {
		stroke: #444;
	}
}

.ql-editor a {
	// allows links to be colored when bold or italic
	color: inherit;
}

// Link tooltip "Open in a new tab" checkbox
.ql-tooltip .c-rich-text-link-tooltip-target {
	display: none;
	margin-top: 6px;
	white-space: nowrap;

	.c-rich-text-link-tooltip-target__label {
		color: #444;
		display: inline-block;
		font: inherit;
		margin-right: 6px;
		vertical-align: middle;
	}

	.c-rich-text-link-tooltip-target__checkbox {
		vertical-align: text-top;
	}
}

.ql-tooltip.ql-editing .c-rich-text-link-tooltip-target {
	display: block;
}

.o-text-validation.c-rich-text__validation {
	bottom: 8px;
	right: 10px;
}

// override validation coloring
.c-font-selector__dropdown__input {
	.c-rich-text & {
		border-color: #bbb !important; /* stylelint-disable-line declaration-no-important */
	}
}

.c-rich-text-sort {
	font-size: 12px;
	padding-left: 8px;
}

.c-rich-text-font-container {
	min-width: 140px;
}

// Color class overrides
.ql-color-\#e60000 { color: #e60000; }
.ql-color-\#ff9900 { color: #f90; }
.ql-color-\#ffff00 { color: #ff0; }
.ql-color-\#008a00 { color: #008a00; }
.ql-color-\#0066cc { color: #06c; }
.ql-color-\#9933ff { color: #93f; }
.ql-color-\#ffffff { color: #fff; }
.ql-color-\#facccc { color: #facccc; }
.ql-color-\#ffebcc { color: #ffebcc; }
.ql-color-\#ffffcc { color: #ffc; }
.ql-color-\#cce8cc { color: #cce8cc; }
.ql-color-\#cce0f5 { color: #cce0f5; }
.ql-color-\#ebd6ff { color: #ebd6ff; }
.ql-color-\#bbbbbb { color: #bbb; }
.ql-color-\#f06666 { color: #f06666; }
.ql-color-\#ffc266 { color: #ffc266; }
.ql-color-\#ffff66 { color: #ff6; }
.ql-color-\#66b966 { color: #66b966; }
.ql-color-\#66a3e0 { color: #66a3e0; }
.ql-color-\#c285ff { color: #c285ff; }
.ql-color-\#888888 { color: #888; }
.ql-color-\#a10000 { color: #a10000; }
.ql-color-\#b26b00 { color: #b26b00; }
.ql-color-\#b2b200 { color: #b2b200; }
.ql-color-\#006100 { color: #006100; }
.ql-color-\#0047b2 { color: #0047b2; }
.ql-color-\#6b24b2 { color: #6b24b2; }
.ql-color-\#444444 { color: #444; }
.ql-color-\#5c0000 { color: #5c0000; }
.ql-color-\#663d00 { color: #663d00; }
.ql-color-\#666600 { color: #660; }
.ql-color-\#003700 { color: #003700; }
.ql-color-\#002966 { color: #002966; }
.ql-color-\#3d1466 { color: #3d1466; }

.ql-bg-\#000000 { background-color: #000; }
.ql-bg-\#e60000 { background-color: #e60000; }
.ql-bg-\#ff9900 { background-color: #f90; }
.ql-bg-\#ffff00 { background-color: #ff0; }
.ql-bg-\#008a00 { background-color: #008a00; }
.ql-bg-\#0066cc { background-color: #06c; }
.ql-bg-\#9933ff { background-color: #93f; }
.ql-bg-\#facccc { background-color: #facccc; }
.ql-bg-\#ffebcc { background-color: #ffebcc; }
.ql-bg-\#ffffcc { background-color: #ffc; }
.ql-bg-\#cce8cc { background-color: #cce8cc; }
.ql-bg-\#cce0f5 { background-color: #cce0f5; }
.ql-bg-\#ebd6ff { background-color: #ebd6ff; }
.ql-bg-\#bbbbbb { background-color: #bbb; }
.ql-bg-\#f06666 { background-color: #f06666; }
.ql-bg-\#ffc266 { background-color: #ffc266; }
.ql-bg-\#ffff66 { background-color: #ff6; }
.ql-bg-\#66b966 { background-color: #66b966; }
.ql-bg-\#66a3e0 { background-color: #66a3e0; }
.ql-bg-\#c285ff { background-color: #c285ff; }
.ql-bg-\#888888 { background-color: #888; }
.ql-bg-\#a10000 { background-color: #a10000; }
.ql-bg-\#b26b00 { background-color: #b26b00; }
.ql-bg-\#b2b200 { background-color: #b2b200; }
.ql-bg-\#006100 { background-color: #006100; }
.ql-bg-\#0047b2 { background-color: #0047b2; }
.ql-bg-\#6b24b2 { background-color: #6b24b2; }
.ql-bg-\#444444 { background-color: #444; }
.ql-bg-\#5c0000 { background-color: #5c0000; }
.ql-bg-\#663d00 { background-color: #663d00; }
.ql-bg-\#666600 { background-color: #660; }
.ql-bg-\#003700 { background-color: #003700; }
.ql-bg-\#002966 { background-color: #002966; }
.ql-bg-\#3d1466 { background-color: #3d1466; }

// Size option overrides
.ql-size { max-width: 60px; }
.ql-size .ql-picker-item:nth-child(1) { font-size: 6px; }
.ql-size .ql-picker-item:nth-child(2) { font-size: 7px; }
.ql-size .ql-picker-item:nth-child(3) { font-size: 8px; }
.ql-size .ql-picker-item:nth-child(4) { font-size: 9px; }
.ql-size .ql-picker-item:nth-child(5) { font-size: 10px; }
.ql-size .ql-picker-item:nth-child(6) { font-size: 11px; }
.ql-size .ql-picker-item:nth-child(7) { font-size: 12px; }
.ql-size .ql-picker-item:nth-child(8) { font-size: 14px; }
.ql-size .ql-picker-item:nth-child(9) { font-size: 16px; }
.ql-size .ql-picker-item:nth-child(10) { font-size: 18px; }
.ql-size .ql-picker-item:nth-child(11) { font-size: 20px; }
.ql-size .ql-picker-item:nth-child(12) { font-size: 21px; }
.ql-size .ql-picker-item:nth-child(13) { font-size: 24px; }
.ql-size .ql-picker-item:nth-child(14) { font-size: 28px; }
.ql-size .ql-picker-item:nth-child(15) { font-size: 32px; }
.ql-size .ql-picker-item:nth-child(16) { font-size: 36px; }
.ql-size .ql-picker-item:nth-child(17) { font-size: 48px; }
.ql-size .ql-picker-item:nth-child(18) { font-size: 60px; }