* { box-sizing: border-box }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	margin-bottom: calc(2 * var(--spacing));
	color: var(--color-neutral-900);
	font-weight: 400;

	&.--label {
		color: var(--bg-color-xdark);
		text-transform: uppercase;
		font-size: var(--text-xs);
	}
}

h1 { font-size: var(--text-2xl) }

h2 { font-size: var(--text-md) }

p, label {
	margin: 0;
	color: var(--text-color);
}

small {
	font-size: var(--text-sm);
	color: var(--color-neutral-500);

	&.--label {
		color: var(--bg-color-xdark);
		text-transform: uppercase;
		font-size: var(--text-xs);
	}
}

a {
	color: inherit;
	text-decoration: none;
}

a[href^="mailto:"] {
	background-color: white;
	border: 1px solid var(--color-neutral-200);
	display: flex;
	align-items: center;
	gap: calc(2 * var(--spacing));
	border-radius: var(--radius-lg);
	padding: 0 calc(3 * var(--spacing));
	height: calc(8 * var(--spacing));
	display: flex;
	align-items: center;
	justify-content: center;

	svg {
		width: calc(4 * var(--spacing));
		height: calc(4 * var(--spacing));
	}
}

a[href^="tel:"] {
	background-color: var(--color-emerald);
	color: white;
	display: flex;
	align-items: center;
	gap: calc(2 * var(--spacing));
	border-radius: var(--radius-lg);
	padding: 0 calc(3 * var(--spacing));
	height: calc(8 * var(--spacing));
	display: flex;
	align-items: center;
	justify-content: center;

	svg {
		width: calc(4 * var(--spacing));
		height: calc(4 * var(--spacing));
	}
}

ul, ol {
	margin: 0;
	padding-left: 0;
}

li { list-style-type: none }

button { background-color: transparent }

button,
input[type=submit],
.btn {
	height: calc(8 * var(--spacing));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 calc(3 * var(--spacing));
	border: 0;
	border-radius: var(--radius-md);
	box-sizing: border-box;
	font-weight: var(--font-weight-medium);
	font-size: var(--text-sm);
	cursor: default;
	text-wrap: nowrap;

	&.primary {
		background-color: #000;
		color: white;
	}

	&.secondary {
		background-color: white;
		border: 1px solid var(--color-neutral-200);
	}

	&.tertiary {
		border-radius: 0.75rem;
	}

	&.danger {
		color: var(--color-red);
		border: 1px solid var(--color-red-light);
	}

	&.icon {
		background-color: transparent;
		padding: 0;
		height: initial;
	}

	&.--full-width {
		width: 100%;
	}
}

button.clear {
	padding: 0;
}

input { border: 0 }

input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]),
select,
textarea {
	display: block;
	width: 100%;
	background-color: var(--bg-color-light);
	border: 0;
	border-radius: var(--radius-md);
	padding: calc(2 * var(--spacing)) calc(3 * var(--spacing));
	font-family: inherit;
	font-size: inherit;
}

input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]),
select {
	height: calc(10 * var(--spacing));
}

input[type=radio],
input[type=checkbox] {
	height: calc(4 * var(--spacing));
	margin-right: calc(1 * var(--spacing));
}

input[type=search] {
	background-color: white;
}

label {
	display: block;
	margin-bottom: calc(1 * var(--spacing));
}

gmp-place-autocomplete {
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-md);
	font-family: inherit;
}

form.card {
	padding: calc(6 * var(--spacing));
}

table {
	width: 100%;

	th {
		border-bottom: 1px solid var(--color-neutral-200);
		height: calc(10 * var(--spacing));
		padding: 0 calc(2 * var(--spacing));
		text-align: left;
		vertical-align: middle;
		font-weight: var(--font-weight-medium);
	}

	td {
		padding: calc(2 * var(--spacing));
		text-align: left;
		white-space: nowrap;
		font-size: var(--text-sm);
	}
}

details {
	summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: calc(3 * var(--spacing));
	}

	h1, h2, h3, h4, h5, h6 { margin-bottom: 0 }

	.details-body {
		padding: calc(3 * var(--spacing));
		border-top: 1px solid var(--color-neutral-200);

		@media (width < 40rem) {
			border-top: 0;
		}
	}

	.details-expand-btn svg {
		width: calc(4 * var(--spacing));
		height: calc(4 * var(--spacing));
	}

	&:not(:last-child) {
		border-bottom: 1px solid var(--color-neutral-200);
	}
}

dt { color: var(--bg-color-xdark) }
dd { margin: 0 }

hr {
	height: 0;
	border: 0;
	border-top: 1px solid var(--color-neutral-200);
	padding-bottom: calc(6 * var(--spacing));
	margin-top: calc(6 * var(--spacing));
	margin-bottom: 0;
}