/* Buttons: solid yellow (primary) and dark outline (secondary). */
.pm-btn {
	--pm-btn-h: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: var(--pm-btn-h);
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 5px;
	font-family: var(--pm-font-display);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		background-color 0.2s var(--pm-ease),
		border-color 0.2s var(--pm-ease),
		color 0.2s var(--pm-ease),
		box-shadow 0.2s var(--pm-ease),
		transform 0.2s var(--pm-ease);
}

.pm-btn__icon {
	flex: none;
	width: 16px;
	height: 16px;
	transition: transform 0.2s var(--pm-ease);
}

.pm-btn:hover .pm-icon--arrow-right {
	transform: translateX(3px);
}

.pm-btn--primary {
	background: var(--pm-accent);
	color: var(--pm-on-accent);
	box-shadow: 0 0 0 0 var(--pm-glow);
}

.pm-btn--primary:hover {
	background: var(--pm-accent-press);
	box-shadow: 0 6px 28px -6px var(--pm-glow);
}

.pm-btn--outline {
	border-color: var(--pm-border-strong);
	background: rgb(255 255 255 / 3%);
	color: var(--pm-text);
}

.pm-btn--outline:hover {
	border-color: var(--pm-accent);
	color: var(--pm-accent);
}

.pm-btn--outline .pm-icon--play {
	--pm-play-glyph: var(--pm-bg);
	width: 20px;
	height: 20px;
	color: var(--pm-text);
}

.pm-btn--outline:hover .pm-icon--play {
	color: var(--pm-accent);
}

.pm-btn--sm {
	--pm-btn-h: 38px;
	gap: 12px;
	padding: 0 20px;
	font-size: 11.5px;
}

.pm-btn:active {
	transform: translateY(1px);
}