.ObColorCard-root {
	--bg-color-border: black;
	--bg-color-main: white;
	--bg-size: 0.75rem;
	--card-color: rgb(0, 0, 0);

	display: flex;
	align-items: stretch;
	min-height: 10rem;
	overflow: hidden;
	border-radius: 0.25rem;
	box-shadow:
		0 1px 12px rgba(0, 0, 0, 0.15),
		0 1px 6px rgba(0, 0, 0, 0.25);
	color: #666;
	background-image: linear-gradient(
		to right,
		var(--bg-color-border),
		var(--bg-color-border) var(--bg-size),
		var(--bg-color-main) var(--bg-size),
		var(--bg-color-main)
	);
	font-family:
		"Variable Bahnschrift",
		"Bahnschrift",
		"Open Sans",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		Arial,
		sans-serif,
		"Apple Color Emoji",
		"Segoe UI Emoji",
		"Segoe UI Symbol";
	font-size: 1rem;
	transition: all ease-in-out 300ms;
	cursor: pointer;

	&:nth-of-type(5n + 1) {
		--bg-color-border: rgb(178, 108, 190);
	}
	&:nth-of-type(5n + 2) {
		--bg-color-border: rgb(79, 164, 61);
	}
	&:nth-of-type(5n + 3) {
		--bg-color-border: rgb(246, 170, 23);
	}
	&:nth-of-type(5n + 4) {
		--bg-color-border: rgb(218, 93, 83);
	}
	&:nth-of-type(5n + 5) {
		--bg-color-border: rgb(23, 162, 184);
	}

	&:hover,
	&:focus {
		--bg-color-main: #f5f5f5;
		box-shadow:
			0 3px 18px rgba(0, 0, 0, 0.15),
			0 3px 12px rgba(0, 0, 0, 0.25);
		text-decoration: none;
	}

	@media screen and (min-width: 48rem) {
		font-size: 1.2rem;
	}
}

.ObColorCard-column {
	display: flex;
	flex: 1 1 100%;
	flex-direction: column;
	justify-content: space-between;
	margin: 1rem 0;
	padding: 0.5rem 1.5rem 0.5rem 1rem;
	overflow: hidden;
	text-overflow: ellipsis;

	&:first-child {
		margin-left: var(--bg-size, 0.75rem);
	}

	&.ObColorCard-minor {
		flex: 0 0 4rem;
		border-right: 1px solid #e3e3e3;
		transition: margin ease-in-out 300ms;

		@media screen and (min-width: 48rem) {
			flex: 0 0 8rem;
		}
	}
}

.ObColorCard-detailValue {
	color: #555555;
}

.ObColorCard-detailLabel {
	color: #696969;
	font-size: 0.8rem;
	text-transform: uppercase;
}

.ObColorCard-detail {
	&:not(:last-child) {
		margin-right: 1.5rem;
	}

	&.ObColorCard-primary,
	&.ObColorCard-primary .ObColorCard-detailValue {
		font-size: 1.25rem;
		font-weight: 300;
	}

	&.ObColorCard-primary .ObColorCard-detailValue {
		color: unset;
	}

	@media screen and (min-width: 48rem) {
		font-size: 1rem;
	}
}

.ObColorCard-stepList {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ObColorCard-step {
	position: relative;
	text-box-trim: trim-both;

	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.ObColorCard-step::before {
	flex: 0.6em 0 0;
	content: "";

	position: relative;
	top: 0.25em; /* half the height difference of text and the circle */

	width: 0.6em;
	height: 0.6em;
	background: white;
	border: 2px solid var(--bg-color-border, #999);
	border-radius: 50%;
	box-sizing: border-box;
	z-index: 1;
}

.ObColorCard-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: calc(0.25em + 0.6em + 0.15em); /* dot top + dot height + 0.15em spacing */
	left: calc(0.3em - 1px); /* half of the circle width minus half the border width */
	height: calc(100% - 0.95em + 1rem + 0.0625em); /* height of container - top + gap */
	border-left: 2px dotted #999;
	z-index: 0;
}