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

.Vlt-center {
	text-align: center !important;
}

.Vlt-right {
	text-align: right !important;
}

.Vlt-left {
	text-align: left !important;
}

.Vlt-nowrap {
	white-space: nowrap !important;
}

.Vlt-no-border {
	border-color: transparent !important;
	transition: border-color .5s;

	&:hover,
	&:active,
	&:focus {
		border-color: initial !important;
	}
}

.Vlt-elevation {
	&--1 {
		box-shadow: 0 2px 10px rgba($black, 0.1) !important;
	}

	&--2 {
		box-shadow: 0 4px 20px rgba($black, 0.1) !important;
	}

	&--3 {
		box-shadow: 0 10px 30px rgba($black, 0.1) !important;
	}

	&--4 {
		box-shadow: 0 20px 40px rgba($black, 0.1) !important;
	}
}

.Vlt-status {
	background-color: currentColor;
	border: 2px solid $white;
	border-radius: 100%;
	bottom: 0;
	box-sizing: content-box;
	display: block;
	height: 8px;
	position: absolute;
	right: 0;
	width: 8px;
}

.Vlt-truncate {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	&--inline {
		display: inline;
	}
}

hr {
	border-bottom: 0;
	border-top: 1px solid $grey-light;
	flex: 0 0 100%;
	height: 0;
	margin: $unit3 0;

	&[class*='Vlt-gradient'] {
		border: 0;
		height: 1px;
	}
}

.hr--tall {
	margin: $unit4 0;
}

.hr--short {
	margin: $unit2 0;
}

.hr--shorter {
	margin: $unit1 0;
}

.Vlt-icon {
	display: inline-block;
	height: 24px;
	vertical-align: middle;
	width: 24px;

	&--18 {
		height: 18px;
		width: 18px;
	}

	&--small {
		height: 20px;
		width: 20px;
	}

	&--smaller {
		height: 16px;
		width: 16px;
	}

	&--text-bottom {
		vertical-align: text-bottom;
	}

	&--large {
		height: 32px;
		width: 32px;
	}

	&--larger {
		height: 40px;
		width: 40px;
	}

	&--largest {
		height: 48px;
		width: 48px;
	}
}

.Vlt-container {
	max-width: 1200px;
}

$devices: (
	#{$L-plus}: '',
	#{$S-only}: 'S-',
	#{$M-only}: 'M-',
	'': 'A-'
	);

$directions: 'top', 'bottom';
$units: ($unitN, $unit1, $unit2, $unit3, $unit4);

@each $direction in $directions {
	@each $media, $devicePrefix in $devices {
		@for $i from 1 through 5 {

			.Vlt-margin--#{$devicePrefix}#{$direction}#{$i - 1} {
				@if $media != '' {
					@media #{$media} {
						margin-#{$direction}: nth($units, $i) !important;
					}
				} @else {
					margin-#{$direction}: nth($units, $i) !important;
				}
			}
		}
	}
}