@use "vars";

.clickable {
	&--link {
		color: vars.$rgb-link-blue !important;
	}
}

.plain {
	font-weight: initial !important;
	font-style: initial !important;
	text-decoration: none !important;
}

.fade {
	transition: opacity vars.$time-3-frames linear;
}

.float-clear {
	clear: both;
}

.stripe- {
	&even {
		&:nth-child(even) {
			background: vars.$rgb-stripe-grey;
		}

		&--faint:nth-child(even) {
			background: vars.$rgb-stripe-grey--faint;
		}
	}

	&odd {
		&:nth-child(odd) {
			background: vars.$rgb-stripe-grey;
		}

		&--faint:nth-child(odd) {
			background: vars.$rgb-stripe-grey--faint;
		}
	}

	&child- {
		&even-first {
			&:nth-child(even) > :first-child {
				background: vars.$rgb-stripe-grey;
			}
		}
	}
}

.veapp {
	&__ {
		&ele-hoverable {
			&:hover {
				background: vars.$rgb-bg--alt;
			}
		}
	}
}

.last-mr-0:last-child {
	margin-right: 0 !important;
}

// redefine this here to ensure it overrides all the important display types above
.hidden {
	display: none !important;
}