@responsive {
	// Display on collapsed
	.hidden-on-collapsed {
		.collapsed & {
			display: none;
		}
	}
	.inline-block-on-collapsed {
		.collapsed & {
			display: inline-block;
		}
	}
	.block-on-collapsed {
		.collapsed & {
			display: block;
		}
	}

	// Other useful legacy utility classes
	.u {
		// Reset btn style
		&-btn-unstyled {
			@include btn-unstyled;
		}
		// Reset List/ul Style
		&-list-unstyled {
			/* crit:start */
			@include u-list-unstyled;
			/* crit:end */
		}
		// Reset inputstyle
		&-input-unstyled {
			@include input-unstyled;
		}

		// Link color stay on hover/focus based on parent color
		&-link{
			&-colorstay{
				color: inherit;
				&:hover, &:focus{
					color: inherit;
				}
			}
		}

		// Background image reset
		// no-repeat, centered, and cover size
		&-bgimg {
			@include bgimg-with-ratio;
			page-break-inside: avoid;
			&__backup {
				opacity: 0;
				@media print {
					opacity: 1;
				}
			}
		}
		// Same embed responsive as Boostrap's embed-responsive, but with BEM style syntax
		&-embed {
			position: relative;
			display: block;
			height: 0;
			padding: 0;
			overflow: hidden;
			padding-bottom: 100%; //by default, it's a square
			&__item,
			iframe,
			embed,
			object,
			video {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				height: 100%;
				width: 100%;
				border: 0;
			}

			&--16by9 {
				padding-bottom: 56.25%;
			}
			&--4by3 {
				padding-bottom: 75%;
			}
		}


		&-vertical-center {
			@include vertical-center;
		}
		&-absolute-center {
			@include absolute-center;
		}
		&-horizontal-center {
			@include horizontal-center;
		}

		// Custom
		&-gradient-overlay {
			position: relative;
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,0.5);
			}
		}
	}
}

// exception since it's desktop first
.u-table-responsive {
	@each $breakpoint in map-keys($grid-breakpoints) {
		$next: breakpoint-next($breakpoint, $grid-breakpoints);
		$infix: breakpoint-infix($next, $grid-breakpoints);
		&#{$infix} {
			@include media-breakpoint-down($breakpoint) {
				display: block;
				width: 100%;
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
				-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
				// Prevent double border on horizontal scroll due to use of `display: block;`
				>.table-bordered {
					border: 0;
				}
			}
		}
	}
}