/* todo: is there a better way to handle defining these animations? despite efforts,
   this implementation still has some degree of transition stacking / delays in nested
   svg contexts in chrome */

/* BG Color Only */
body[data-color-transition-enabled],
body[data-color-transition-enabled] :is(
	[data-bg-transition]:not([data-color-transition]):not([data-border-transition]),
	button
) {
	transition: background linear .5s;
}

/* Border Color Only */
body[data-color-transition-enabled] :is(
	[data-border-transition]:not([data-bg-transition]):not([data-color-transition])
) {
	transition: border-color linear .5s;
}

/* Color Only */
body[data-color-transition-enabled] :is(
	[data-color-transition]:not([data-bg-transition]):not([data-border-transition]),
	p,
	a:not(h1 a),
	span:not(p span),
	time:not(p time),
	li:not([role='doc-footnote']), dt, dd,
	h1, h2, h3, h4, h5, h6,
	td, th
) {
	transition: color linear .5s;
}

/* BG and Color */
body[data-color-transition-enabled] :is(
	[data-bg-transition][data-color-transition]:not([data-border-transition]),
	pre,
	code:not(pre code),
	samp:not(pre samp),
	mark,
	[role='doc-footnote']
) {
	transition:
		color linear .5s,
		background linear .5s;
}

/* BG and Border */
body[data-color-transition-enabled] :is(
	[data-bg-transition][data-border-transition]:not([data-color-transition]),
	body > footer,
	p.error-box,
	.popup form,
	#outline
) {
	transition:
		background linear .5s,
		border-color linear .5s;
}

/** Color and Border */
body[data-color-transition-enabled] :is(
	[data-color-transition][data-border-transition]:not([data-bg-transition]),
	tbody tr,
	.tbody .tr
) {
	transition:
		color linear .5s,
		border-color linear .5s;
}

/* BG, Color, and Border */
body[data-color-transition-enabled] :is(
	[data-bg-transition][data-border-transition][data-color-transition],
	input, textarea, select,
	blockquote,
	:is(section, aside):is([role='note'], .info, .highlight, .warning, .problem)
) {
	transition:
		color linear .5s,
		background linear .5s,
		border-color linear .5s;
}

/* Fill and Stroke */
body[data-color-transition-enabled] svg :is(
	[fill^='var('][stroke^='var(']:not([fill^='var('][stroke^='var('] *),
	[style*='fill:'][style*='stroke:']:not([style*='fill:'][style*='stroke:'] *)
) {
	transition:
		fill linear .5s,
		stroke linear .5s;
}

/* Fill Only */
body[data-color-transition-enabled] svg :is(
	[fill^='var(']:not([stroke^='var(']):not([fill^='var('] *),
	[style*='fill:']:not([style*='stroke:']):not([style*='fill:'] *)
) {
	transition: fill linear .5s;
}

/* Stroke Only */
body[data-color-transition-enabled] :is(
	svg [stroke^='var(']:not([fill^='var(']):not([stroke^='var('] *),
	svg [style*='stroke:']:not([style*='fill:']):not([style*='stroke:'] *)
	svg.icon
 ) {
	transition: stroke linear .5s;
}