/* HTML
-------------------------------------------- */

html {
	min-height: 100%;
	font-size: $base_font_size;

	@include media-breakpoint-down(md) {
		font-size: $base_font_size - 1px;
	}

	@include media-breakpoint-down(sm) {
		font-size: $base_font_size - 2px;
	}

}

/* BODY
-------------------------------------------- */

body {
	min-width: px2rem(320px);
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	overflow-y: initial;
	background-color: var(--vlt-color-white);

	@if $smooth_font {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

}

/* IMAGE
-------------------------------------------- */

img {
	max-width: 100%;
	height: auto;
}

/* PARAGRAPH
-------------------------------------------- */

p {
	margin: 0 0 px2rem(30px);

	&:empty {
		display: none;
	}

}

/* LINK
-------------------------------------------- */

a {
	color: inherit;
	text-decoration: none;
	transition: all var(--vlt-transition-duration) var(--vlt-transition-easing);

	&:hover {
		color: inherit;
	}

	&.stretched-link::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

}

/* HEADINGS
-------------------------------------------- */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
	padding: 0;
	margin: 0;

	u {
		text-decoration: none;
		border-bottom: 1px solid currentColor;
	}

}

h1,
.h1 {

	&.large-heading {
		@include vlt_primary_bold_70;
	}

}

/* LIST
-------------------------------------------- */

ul,
ol {
	padding: 0;
	margin: 0;
	list-style-position: inside;
}

.list {
	padding-left: px2rem(40px);
	color: var(--vlt-color-dark);
	@include vlt_primary_medium_15;

	li {
		position: relative;
		list-style: none;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -40px;
			width: 24px;
			height: 24px;
			background-color: var(--vlt-color-gray-middle);
			background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 12 10'><path fill='#B1B1B4' d='m10.663 2.608.609-.663L9.945.728l-.608.664 1.326 1.216ZM4.5 8l-.663.608.663.724.663-.724L4.5 8ZM2.663 4.665 2.055 4 .728 5.217l.609.664 1.326-1.216Zm6.674-3.273-5.5 6 1.326 1.216 5.5-6-1.326-1.216Zm-4.174 6-2.5-2.727L1.337 5.88l2.5 2.727 1.326-1.216Z'/></svg>"));
			background-repeat: no-repeat;
			background-position: center;
			background-size: 50%;
			border-radius: 100%;
		}

		+ li {
			margin-top: px2rem(20px);
		}

		&.active::before {
			background-color: var(--vlt-accent-2);
			background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 12 10'><path fill='#ffffff' d='m10.663 2.608.609-.663L9.945.728l-.608.664 1.326 1.216ZM4.5 8l-.663.608.663.724.663-.724L4.5 8ZM2.663 4.665 2.055 4 .728 5.217l.609.664 1.326-1.216Zm6.674-3.273-5.5 6 1.326 1.216 5.5-6-1.326-1.216Zm-4.174 6-2.5-2.727L1.337 5.88l2.5 2.727 1.326-1.216Z'/></svg>"));
		}

	}

}

/* LEAD
-------------------------------------------- */

.lead {
	margin-bottom: px2rem(18px);
	color: var(--vlt-color-dark);
	@include vlt_primary_bold_20;
}

/* DIVIDER
-------------------------------------------- */

hr,
.hr {
	height: 0;
	margin: px2rem(30px) 0;
	background-color: transparent;
	border-top: 1px solid var(--vlt-color-gray);
	opacity: .3;
}

/* ADDRESS
-------------------------------------------- */

address {
	margin: 0 0 px2rem(30px);
	color: var(--vlt-accent-1);
	text-transform: none;
	@include vlt_primary_bold_20;
}

/* BLOCKQUOTE
-------------------------------------------- */

blockquote {
	padding: 0;
	margin: 0 0 px2rem(30px);

	p {
		margin-bottom: 0;
	}

}

cite {
	display: block;
	margin: px2rem(16px) 0 0;
	@include vlt_primary_bold_12;
}

/* PREFORMATTED
-------------------------------------------- */

code,
kbd {
	display: inline-block;
	padding: 0 px2rem(8px);
	color: var(--vlt-color-dark);
	background: var(--vlt-linear-gradient);
	border-radius: calc(var(--vlt-border-radius-xs) / 2);
	@include vlt_primary_regular_14;
}

a > code {
	color: var(--vlt-color-dark);
}

pre {
	max-width: 100%;
	padding: px2rem(35px);
	margin: 0 0 px2rem(30px);
	overflow: auto;
	clear: both;
	font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	color: var(--vlt-color-dark);
	tab-size: 4;
	white-space: pre-wrap;
	background: var(--vlt-linear-gradient);
	border-radius: var(--vlt-border-radius-xs);
	@include vlt_primary_regular_14;

	code {
		color: var(--vlt-color-dark);
	}

}

/* FORM / INPUT / TEXTAREA / SELECT
-------------------------------------------- */

form {
	max-width: 100%;
}

label {
	display: block;
	width: 100%;
	margin-bottom: px2rem(5px);
	color: var(--vlt-color-black);
	user-select: none;
}

input[type=text],
input[type=date],
input[type=email],
input[type=password],
input[type=tel],
input[type=url],
input[type=search],
input[type=number],
textarea,
select {
	display: block;
	width: 100%;
	appearance: none;
	padding: px2rem(14px) px2rem(20px);
	margin: 0;
	color: var(--vlt-color-dark);
	background-color: var(--vlt-color-gray-0p17);
	border: none;
	border-radius: var(--vlt-border-radius-xs);
	outline: none;
	transition: all var(--vlt-transition-duration) var(--vlt-transition-easing);

	@include input-placeholder {
		color: inherit;
		opacity: 1;
	}

	&:focus {
		background-color: var(--vlt-color-gray-0p20);
	}

	&.white {
		color: var(--vlt-color-dark);
		background-color: var(--vlt-color-white);

		@include input-placeholder {
			color: var(--vlt-color-dark);
		}

		&:focus {
			background-color: var(--vlt-color-white);
		}

	}

	&.style-2 {
		padding: 0 0 px2rem(16px);
		font-size: px2rem(15px);
		color: inherit;
		background-color: transparent;
		border-bottom: 1px solid var(--vlt-color-gray-0p7);
		border-radius: 0;

		&.white {
			color: var(--vlt-color-white);
			border-color: var(--vlt-color-white-0p6);

			@include input-placeholder {
				color: var(--vlt-color-white);
			}

			&:hover,
			&:focus {
				border-color: var(--vlt-color-white);
			}

		}

		&.gray {
			color: var(--vlt-color-white);
			border-color: var(--vlt-color-gray-dark);

			@include input-placeholder {
				color: var(--vlt-color-white);
			}

			&:hover,
			&:focus {
				color: var(--vlt-color-white);
				border-color: var(--vlt-color-white);
			}

		}

		&:focus {
			background-color: transparent;
			border-color: var(--vlt-color-dark);
		}

	}

	&.style-3 {
		padding: px2rem(23px) px2rem(28px);
		background-color: var(--vlt-color-gray-light);
		border: none;
		border-radius: px2rem(35px);

		&:focus {
			background-color: var(--vlt-color-gray-light);
		}

		&.white {
			color: var(--vlt-color-dark);
			background-color: var(--vlt-color-white);

			@include input-placeholder {
				color: var(--vlt-color-dark);
			}

			&:focus,
			&:hover {
				color: var(--vlt-color-dark);
				background-color: var(--vlt-color-white);
			}

		}

	}

}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	appearance: none;
	margin: 0;
}

select {
	appearance: none;
	background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'><path fill='#4B4A4D' d='m6 6-.495.495L6 6.99l.495-.495L6 6ZM.505 1.495l5 5 .99-.99-5-5-.99.99Zm5.99 5 5-5-.99-.99-5 5 .99.99Z'/></svg>"));
	background-repeat: no-repeat;
	background-position: calc(100% - 20px) center;
	background-size: 12px 7px;

	&.style-2 {
		background-position: 100% calc(50% - 8px);

		&.gray {

			option {
				color: var(--vlt-color-dark);
			}

		}

	}

	&.white {
		background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'><path fill='#ffffff' d='m6 6-.495.495L6 6.99l.495-.495L6 6ZM.505 1.495l5 5 .99-.99-5-5-.99.99Zm5.99 5 5-5-.99-.99-5 5 .99.99Z'/></svg>"));

		option {
			color: var(--vlt-color-dark);
		}

	}

}

textarea {
	width: 100%;
	max-width: 100%;
	transition: height 0s;
}

button,
input[type=submit] {

	&:focus {
		outline: none;
	}

}

input[type=text],
input[type=date],
input[type=email],
input[type=password],
input[type=tel],
input[type=url],
input[type=search],
input[type=number],
textarea,
select {

	&:focus {

		@include input-placeholder {
			opacity: 0;
		}

	}

}

.vlt-form-group {
	position: relative;
	display: block;
	margin-bottom: px2rem(14px);

	&--md {
		margin-bottom: px2rem(30px);
	}

	&--lg {
		margin-bottom: px2rem(40px);
	}

}

.vlt-form-row {
	display: grid;
	grid-gap: px2rem(30px);
	grid-template-columns: repeat(1, 1fr);

	&.two-col {
		grid-template-columns: repeat(2, 1fr);

		@include media-breakpoint-down(md) {
			grid-gap: 0;
			grid-template-columns: repeat(1, 1fr);
		}

	}

	&.three-col {
		grid-template-columns: repeat(3, 1fr);

		@include media-breakpoint-down(md) {
			grid-gap: 0;
			grid-template-columns: 1fr 1fr;
		}

		@include media-breakpoint-down(sm) {
			grid-template-columns: repeat(1, 1fr);
		}

	}

}

.vlt-attach-file {

	.vlt-attach-file__label {
		cursor: pointer;
		@include vlt_primary_medium_15;

		svg {
			margin-right: px2rem(15px);
		}

	}

	&.white .vlt-attach-file__label {
		color: var(--vlt-color-white);
	}

}

.vlt-checkbox {
	position: relative;
	display: flex;
	align-items: center;
	padding-left: px2rem(30px);
	color: var(--vlt-color-dark);
	text-transform: none;
	cursor: pointer;
	user-select: none;

	&__checkmark {
		position: absolute;
		top: 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: px2rem(17px);
		height: px2rem(17px);
		margin-left: px2rem(-30px);
		background-color: transparent;
		border: 1px solid var(--vlt-color-gray-0p7);
		border-radius: var(--vlt-border-radius-xxs);

		&::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: escape-svg(url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 13"><path fill="#ffffff" fill-rule="evenodd" d="M17.707.293a1 1 0 0 1 0 1.414l-11 11a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 1.414-1.414L6 10.586 16.293.293a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/></svg>'));
			background-repeat: no-repeat;
			background-position: center;
			background-size: px2rem(10px);
			opacity: 0;
		}

	}

	input[type=checkbox]:checked ~ .vlt-checkbox__checkmark,
	&.checked .vlt-checkbox__checkmark {
		background-color: var(--vlt-color-dark);
		border-color: var(--vlt-color-dark);

		&::after {
			opacity: 1;
		}

	}

	&.white {
		color: var(--vlt-color-white);

		.vlt-checkbox__checkmark {
			border: 1px solid var(--vlt-color-white);

			&::after {
				background-image: escape-svg(url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 13"><path fill="#17161A" fill-rule="evenodd" d="M17.707.293a1 1 0 0 1 0 1.414l-11 11a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 1.414-1.414L6 10.586 16.293.293a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/></svg>'));
			}

		}

		input[type=checkbox]:checked ~ .vlt-checkbox__checkmark,
		&.checked .vlt-checkbox__checkmark {
			background-color: var(--vlt-color-white);
			border-color: var(--vlt-color-white);
		}

	}

}

/* DEFINITION LIST
-------------------------------------------- */

dl {
	margin-bottom: 0;

	dt {
		@include vlt_primary_bold_18;
	}

	dd {
		margin-top: px2rem(10px);
		margin-bottom: 0;
	}

}

dd + dt {
	margin-top: px2rem(35px);
}

/* TABLE
-------------------------------------------- */

table {
	width: 100%;
	max-width: 100%;
	margin: 0;
	border-collapse: collapse;

	td,
	th {
		padding: px2rem(10px) px2rem(10px) px2rem(10px) 0;
		border: none;
		border-top: 1px solid var(--vlt-color-gray-0p17);
		border-bottom: 1px solid var(--vlt-color-gray-0p17);
	}

	tr th,
	thead th {
		color: var(--vlt-color-dark);
		@include vlt_primary_bold_16;
	}

}