.gap {
	gap: 1rem;
}

.gap-sm {
	gap: 0.5rem;
}

.gap-xs {
	gap: 0.25rem;
}

.spaced-vertically-xl {
	margin-top: 5rem;
	margin-bottom: 5rem;
}

.spaced-vertically-xxl {
	margin-top: 8rem;
	margin-bottom: 8rem;
}

.spaced-vertically {
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.spaced-vertically-sm {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.no-margin {
	margin: 0;
}

.underlined {
	text-decoration: underline;
}

.no-margin-top {
	margin-top: 0;
}

.no-margin-bottom {
  margin-bottom: 0;
}

.margin-y-auto {
	margin: auto 0;
}

.top-spaced-sm {
	margin-top: 0.5rem;
}

.top-spaced {
	margin-top: 1rem;
}

.top-spaced-lg {
  margin-top: 2.5rem;
}

.bottom-spaced {
	margin-bottom: 1rem;
}

.bottom-spaced-sm {
  margin-bottom: 0.5rem;
}

.right {
	margin-right: 1rem;
}

.left-spaced {
	margin-left: 1rem;
}

.bottom-spaced-lg {
	margin-bottom: 2.5rem;
}

.bottom-spaced-xl {
	margin-bottom: 5rem;
}

.semibold {
	font-weight: 600;
}

.empty-state {
	display: none;

	&:only-child {
		display: block;
	}
}

.secondary-color {
	color: var(--color-dark);
}

.primary-color {
	color: var(--color-darker);
}

.dashed-separator {
	border: 1px dashed var(--color-gray);
}

.text-centered {
	text-align: center;
}

.text-sm {
  font-size: 14px;
}

.full-width {
	width: 100%;
}

.text-editable {
	cursor: text;
}

.text-right {
	text-align: right;
}

.draggable {
	cursor: grab;
}

.text-red {
  color: red;
}

.compact {
  padding: 0.5rem;
}

.super-compact {
  padding: 0.1rem 0.5rem;
}

.padding {
  padding: 1rem;
}

.desktop-only { display: none; }

@media only screen and (min-width: 480px) {
  .mobile-only { display: none; }
  .desktop-only { display: block; }
}

.word-break-word { word-break: break-word; }
.hyphenate { hyphens: auto; }

.w-max { width: max-content; }
.mx-auto { margin: 0 auto; }