/* stylelint-disable declaration-no-important */

//
// Grid Utilities
//
// - Show (specific)
// - Show (greedy)
// - Hide (specific)
// - Hide (greedy)
// -------------------------------------------------------------
@import '../variables/pages.less';

// Show (specific)
//
// Apply these classes to show at the specified size ONLY.
// Assumes you have hidden the element on your own.
// -------------------------------------------------------------
@media (min-width: 0) and (max-width: (@grid-breakpoint-sm - 1)) {
	.u-visible-xs--block { display: block !important; }
	.u-visible-xs--inline { display: inline !important; }
	.u-visible-xs--inline-block { display: inline-block !important; }
}

@media (min-width: @grid-breakpoint-sm) and (max-width: (@grid-breakpoint-md - 1)) {
	.u-visible-sm--block { display: block !important; }
	.u-visible-sm--inline { display: inline !important; }
	.u-visible-sm--inline-block { display: inline-block !important; }
}

@media (min-width: @grid-breakpoint-md) and (max-width: (@grid-breakpoint-lg - 1)) {
	.u-visible-md--block { display: block !important; }
	.u-visible-md--inline { display: inline !important; }
	.u-visible-md--inline-block { display: inline-block !important; }
}

@media (min-width: @grid-breakpoint-lg) {
	.u-visible-lg--block { display: block !important; }
	.u-visible-lg--inline { display: inline !important; }
	.u-visible-lg--inline-block { display: inline-block !important; }
}

// Show (greedy)
//
// Apply these classes to show at the specified sizes or
// larger/smaller.
// Assumes you have hidden the element on your own.
// -------------------------------------------------------------
@media (max-width: (@grid-breakpoint-md - 1)) {
	.u-visible-sm--and-smaller-block { display: block !important; }
	.u-visible-sm--and-smaller-inline { display: inline !important; }
	.u-visible-sm--and-smaller-inline-block { display: inline-block !important; }
}

@media (max-width: (@grid-breakpoint-lg - 1)) {
	.u-visible-md--and-smaller-block { display: block !important; }
	.u-visible-md--and-smaller-inline { display: inline !important; }
	.u-visible-md--and-smaller-inline-block { display: inline-block !important; }
}

@media (min-width: @grid-breakpoint-sm) {
	.u-visible-sm--and-larger-block { display: block !important; }
	.u-visible-sm--and-larger-inline { display: inline !important; }
	.u-visible-sm--and-larger-inline-block { display: inline-block !important; }
}

@media (min-width: @grid-breakpoint-md) {
	.u-visible-md--and-larger-block { display: block !important; }
	.u-visible-md--and-larger-inline { display: inline !important; }
	.u-visible-md--and-larger-inline-block { display: inline-block !important; }
}

// Hide (specific)
//
// Apply these classes to hide at the specified size ONLY.
// Assumes you have shown the element on your own.
// -------------------------------------------------------------
@media (min-width: 0) and (max-width: (@grid-breakpoint-sm - 1)) {
	.u-hidden-xs { display: none !important; }
}

@media (min-width: @grid-breakpoint-sm) and (max-width: (@grid-breakpoint-md - 1)) {
	.u-hidden-sm { display: none !important; }
}

@media (min-width: @grid-breakpoint-md) and (max-width: (@grid-breakpoint-lg - 1)) {
	.u-hidden-md { display: none !important; }
}

@media (min-width: @grid-breakpoint-lg) {
	.u-hidden-lg { display: none !important; }
}

// Hide (greedy)
//
// Apply these classes to hide at the specified sizes or
// larger/smaller.
// Assumes you have shown the element on your own.
// -------------------------------------------------------------
@media (max-width: (@grid-breakpoint-md - 1)) {
	.u-hidden-sm--and-smaller { display: none !important; }
}

@media (max-width: (@grid-breakpoint-lg - 1)) {
	.u-hidden-md--and-smaller { display: none !important; }
}

@media (min-width: @grid-breakpoint-sm) {
	.u-hidden-sm--and-larger { display: none !important; }
}

@media (min-width: @grid-breakpoint-md) {
	.u-hidden-md--and-larger { display: none !important; }
}

/* stylelint-enable declaration-no-important */