//
// Copyright (c) 2018-present, Vonage. All rights reserved.
//

// We only use 2 breakpoints because normally we design for 3 screen: phone, tablet and desktop
// There's no point in having more than these breakpoints if we're not going to provide design for them

$big-screen: 768px;
$small-screen: 576px;

$big-screen-w-sidenav: 1038px;
$small-screen-w-sidenav: 846px;

$S-only: 'only screen and (max-width: #{$small-screen - 1})';
$M-only: 'only screen and (min-width: #{$small-screen} ) and (max-width: #{$big-screen - 1})';
$M-plus: 'only screen and (min-width: #{$small-screen} )';
$M-less: 'only screen and (max-width: #{$big-screen - 1})';
$L-plus: 'only screen and (min-width: #{$big-screen})';

.Vlt-S-only {
	@media #{$M-plus} {
		display: none !important;
	}
}

.Vlt-M-only {
	@media #{$S-only} {
		display: none !important;
	}

	@media #{$L-plus} {
		display: none !important;
	}
}

.Vlt-L-plus {
	@media #{$M-less} {
		display: none !important;
	}
}

.Vlt-M-plus {
	@media #{$S-only} {
		display: none !important;
	}
}

.Vlt-M-less {
	@media #{$L-plus} {
		display: none !important;
	}
}