/**
 * Stand-in for YouTube's subscribe button.
 *
 * Drawn at the real button's size and proportions so the settings screen and
 * the block editor show admins what the front end will actually look like.
 * platform.js is never loaded in wp-admin, so nothing here is ever displayed
 * next to the real thing.
 */

.ytsub-preview {
	display: inline-flex;
	align-items: center;
	font-family: Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
}

/* Only the "full" layout shows the channel avatar. */
.ytsub-preview__avatar {
	display: none;
	width: 24px;
	height: 24px;
	margin-right: 8px;
	border-radius: 50%;
	background: #e5e5e5 url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23909090'%3E%3Cpath d='M12 12.5a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5Zm0 1.5c-2.9 0-6 1.4-6 3.2V19h12v-1.8c0-1.8-3.1-3.2-6-3.2Z'/%3E%3C/svg%3E" ) center/24px 24px no-repeat;
	flex: 0 0 auto;
}

.ytsub-preview.is-full .ytsub-preview__avatar {
	display: block;
}

.ytsub-preview__button {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 8px;
	border-radius: 2px;
	background: #cc0000;
	color: #fff;
	font-weight: 500;
	flex: 0 0 auto;
}

/* The white rounded rectangle with a red play triangle in it. */
.ytsub-preview__glyph {
	width: 16px;
	height: 12px;
	margin-right: 5px;
	border-radius: 3px;
	background: #fff url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M6.4 3.4 10.6 6l-4.2 2.6z' fill='%23cc0000'/%3E%3C/svg%3E" ) center/16px 12px no-repeat;
	flex: 0 0 auto;
}

.ytsub-preview__count {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 24px;
	margin-left: 6px;
	padding: 0 8px;
	border: 1px solid #ccc;
	border-radius: 2px;
	box-sizing: border-box;
	background: #fff;
	color: #333;
	flex: 0 0 auto;
}

/* The little pointer joining the count box to the button. */
.ytsub-preview__count::before,
.ytsub-preview__count::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transform: translateY(-50%);
}

.ytsub-preview__count::before {
	left: -5px;
	border-right: 5px solid #ccc;
}

.ytsub-preview__count::after {
	left: -4px;
	border-right: 5px solid #fff;
}

.ytsub-preview.is-dark .ytsub-preview__count {
	border-color: #333;
	background: #333;
	color: #fff;
}

.ytsub-preview.is-dark .ytsub-preview__count::before {
	border-right-color: #333;
}

.ytsub-preview.is-dark .ytsub-preview__count::after {
	border-right-color: #333;
}

.ytsub-preview.is-count-hidden .ytsub-preview__count {
	display: none;
}