@font-face {
	font-family: 'font-1';
	src: url('../fonts/font-1.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'font-2';
	src: url('../fonts/font-2.woff') format('woff');
	font-display: swap;
}

@font-face {
	font-family: 'font-3';
	src: url('../fonts/font-3.otf') format('opentype');
	font-display: swap;
}

@font-face {
	font-family: 'font-4';
	src: url('../fonts/font-4.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'font-5';
	src: url('../fonts/font-5.ttf') format('truetype');
	font-display: swap;
}

.font-picker {
	background: #fff;
	max-width: 640px;
}

.font-picker-input-group {
	margin-bottom: 40px;
}

.font-picker-input {
	width: 100%;
	border: none;
	border-bottom: 2px solid #ddd;
	background: transparent;
	padding: 8px 2px 12px;
	font-size: clamp(18px, 3vw, 24px);
	color: #111;
	outline: none;
	transition: border-color .15s ease;
}

.font-picker-input::placeholder {
	color: #bbb;
}

.font-picker-input:focus {
	border-bottom-color: #111;
}

.font-picker .font-picker-options {
	display: flex;
	flex-direction: column;
	row-gap: 28px;
}

.font-picker .font-picker-option {
	position: relative;
	display: block;
	padding: 4px 4px 4px 16px;
	border-left: 3px solid transparent;
	cursor: pointer;
	text-align: left;
	background: transparent;
	transition: background-color .15s ease, border-left-color .15s ease;
}

.font-picker .font-picker-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.font-picker .font-picker-option:hover {
	background: #fafafa;
}

.font-picker .font-picker-option.selected {
	border-left-color: #111;
	background: #f5f5f5;
}

.font-picker .font-picker-option::after {
	content: attr(data-font-name);
	position: absolute;
	top: 0;
	left: 16px;
	transform: translateY(-100%);
	background: #222;
	color: #fff;
	font-size: 12px;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 4px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}

.font-picker .font-picker-option:hover::after,
.font-picker .font-picker-option:focus-within::after {
	opacity: 1;
}

.font-picker .font-preview {
	display: block;
	font-size: clamp(28px, 6vw, 48px);
	line-height: 1.2;
	color: #111;
	word-break: break-word;
}