/**
 * yepx/button. Token pill. GoPOS copy yok.
 */
.yepx-button,
.wp-block-yepx-button {
	box-sizing: border-box;
	display: inline-flex;
	width: auto;
	max-width: 100%;
	min-width: 0;
	vertical-align: middle;
}

.yepx-button--align-center {
	justify-content: center;
}

.yepx-button--align-right {
	justify-content: flex-end;
}

.yepx-button-demo-row,
.wp-block-group.yepx-button-demo-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.yepx-button .yepx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 52px;
	padding: 0.85rem 1.6rem;
	border-radius: var(--yepx-btn-radius, 30px);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	box-shadow: var(--yepx-shadow-brand, 0 10px 22px rgba(16, 44, 59, 0.12));
}

.yepx-button .yepx-btn--solid {
	background: var(--yepx-btn-bg, var(--yepx-color-orange, #e67a1a));
	color: var(--yepx-btn-ink, #fff);
	border: 2px solid transparent;
}

.yepx-button .yepx-btn--outline {
	background: var(--yepx-btn-bg, #fff);
	color: var(--yepx-btn-ink, var(--yepx-color-navy, #102c3b));
	border: 2px solid var(--yepx-color-line, #e5eaed);
	box-shadow: none;
}

.yepx-button .yepx-btn:hover,
.yepx-button .yepx-btn:focus {
	background: var(--yepx-btn-hover, #0a7ca8);
	color: var(--yepx-btn-hover-ink, var(--yepx-btn-ink, #fff));
}
.yepx-button--light-fill .yepx-btn:hover,
.yepx-button--light-fill .yepx-btn:focus {
	color: #fff;
}
.yepx-button .yepx-btn:focus-visible {
	outline: 3px solid var(--yepx-color-focus, #0a7ca8);
	outline-offset: 3px;
}

.yepx-button .yepx-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--yepx-btn-icon-bg, rgba(255, 255, 255, 0.22));
	flex: 0 0 auto;
}

.yepx-button .yepx-btn__icon svg,
.yepx-button .yepx-btn__icon .yepx-icon {
	width: 14px;
	height: 14px;
	display: block;
}

.yepx-button.is-playing .yepx-btn {
	display: none;
}

.yepx-button .yepx-media__player,
.yepx-button .yepx-media__player iframe,
.yepx-button .yepx-media__player video {
	display: block;
	width: min(960px, 100%);
	aspect-ratio: 16 / 9;
	border: 0;
	background: #000;
	border-radius: var(--yepx-radius-md, 16px);
}