.section {
	width: 100%;
	margin: auto;
	padding: 8px 32px;
}

.key {
	background-color: var(--jp-green-80);
	border-radius: var(--jp-border-radius);
	padding: 8px;
	color: var(--jp-white);
	font-weight: 600;
}

.box {
	border: 1px solid var(--jp-gray);
	border-radius: var(--jp-border-radius);
	padding: 16px;
}

.example {
	height: 40px;
	display: flex;
	align-items: center;
	border: 1px solid var(--jp-gray);
	border-radius: var(--jp-border-radius);
	padding: 8px;
}

.value-label {
	font-weight: 600;
	font-size: var(--font-label);
	margin: 8px 0;
}

.value {
	width: 100%;
}

.colors-example {
	width: 100%;
	height: 100%;
}

.instances-wrapper {
	display: flex;
	flex-direction: column;
}

.font-instance {
	margin: 10px 0;
	padding: 20px 30px;
	background-color: var(--jp-white);
	border: 1px dotted var(--jp-gray-10);
	position: relative;

	&:hover .copy-button {
		opacity: 1;
	}
}

.color-instance {
	font-size: var(--font-title-small);
	border: 1px dotted var(--jp-gray-10);
	min-height: 60px;
	line-height: 60px;
	padding: 10px;
	margin: 10px 0;
	position: relative;

	&:hover .copy-button {
		opacity: 1;
	}
}

.copy-button {
	opacity: 0.3;
	position: absolute;
	top: 5px;
	right: 5px;
}
