/* KOL_APES lightbox-only Site Media action rail */

html.light-mode .kol-media-lightbox.kol-apes-lightbox-has-action-rail,
html.dark-mode .kol-media-lightbox.kol-apes-lightbox-has-action-rail {
	gap: 18px !important;
}

.kol-apes-lightbox-action-rail {
	align-self: center !important;
	flex: 0 0 64px !important;
	position: relative !important;
	z-index: 100002 !important;
}

html.light-mode .kol-media-lightbox.kol-apes-lightbox-has-action-rail .kol-media-lightbox-shell,
html.dark-mode .kol-media-lightbox.kol-apes-lightbox-has-action-rail .kol-media-lightbox-shell {
	max-width: min(980px, calc(100vw - 144px)) !important;
}

@media (min-width: 900px) {
	body.kol-apes-media-sidebar-open .kol-media-lightbox.kol-apes-lightbox-has-action-rail .kol-media-lightbox-shell,
	body.kol-apes-vid-sidebar-open .kol-media-lightbox.kol-apes-lightbox-has-action-rail .kol-media-lightbox-shell {
		max-width: min(920px, calc(100vw - var(--kol-apes-media-sidebar-width, 400px) - 152px)) !important;
	}
}

html.light-mode .kol-apes-lightbox-action-rail,
html.dark-mode .kol-apes-lightbox-action-rail {
	color: #f8fafc !important;
}

html.light-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-actions.kol-pec-icons,
html.dark-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-actions.kol-pec-icons {
	align-items: center !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	gap: 14px !important;
	justify-content: center !important;
	max-width: 64px !important;
	padding: 0 !important;
	text-shadow: none !important;
	width: 64px !important;
}

html.light-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-action.kol-pec-icon,
html.dark-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-action.kol-pec-icon {
	align-items: center !important;
	appearance: none !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	color: inherit !important;
	cursor: pointer !important;
	display: grid !important;
	font: inherit !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	gap: 6px !important;
	justify-items: center !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	text-decoration: none !important;
	text-shadow: none !important;
	white-space: normal !important;
	width: 64px !important;
}

.kol-apes-lightbox-action-rail .kol-apes-site-media-action-button {
	align-items: center !important;
	background: rgba(248, 250, 252, 0.94) !important;
	border: 1px solid rgba(15, 23, 42, 0.1) !important;
	border-radius: 999px !important;
	box-sizing: border-box !important;
	color: #111827 !important;
	display: inline-flex !important;
	height: 50px !important;
	justify-content: center !important;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease !important;
	width: 50px !important;
}

html.light-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-action:hover .kol-apes-site-media-action-button,
html.light-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-action:focus-visible .kol-apes-site-media-action-button,
html.dark-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-action:hover .kol-apes-site-media-action-button,
html.dark-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-action:focus-visible .kol-apes-site-media-action-button {
	background: #ffffff !important;
	border-color: rgba(15, 23, 42, 0.18) !important;
	transform: translateY(-1px) !important;
}

html.light-mode .kol-apes-lightbox-action-rail .kol-pec-icon-symbol,
html.dark-mode .kol-apes-lightbox-action-rail .kol-pec-icon-symbol {
	align-items: center !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: inherit !important;
	display: inline-flex !important;
	height: 26px !important;
	justify-content: center !important;
	width: 26px !important;
}

.kol-apes-lightbox-action-rail .kol-apes-site-media-icon {
	display: block !important;
	height: 24px !important;
	width: 24px !important;
}

html.light-mode .kol-apes-lightbox-action-rail .kol-pec-count,
html.light-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-action-label,
html.dark-mode .kol-apes-lightbox-action-rail .kol-pec-count,
html.dark-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-action-label {
	color: inherit !important;
	display: block !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	line-height: 1.15 !important;
	max-width: 64px !important;
	overflow: hidden !important;
	text-align: center !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

html.light-mode .kol-apes-lightbox-action-rail .kol-pec-likes.liked .kol-apes-site-media-action-button,
html.dark-mode .kol-apes-lightbox-action-rail .kol-pec-likes.liked .kol-apes-site-media-action-button {
	background: #fee2e2 !important;
	border-color: #fecaca !important;
	color: #dc2626 !important;
}

html.light-mode .kol-apes-lightbox-action-rail .kol-pec-comments.is-comments-open .kol-apes-site-media-action-button,
html.dark-mode .kol-apes-lightbox-action-rail .kol-pec-comments.is-comments-open .kol-apes-site-media-action-button {
	background: #e0f2fe !important;
	border-color: #bae6fd !important;
	color: #0369a1 !important;
}

html.light-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-action:focus-visible,
html.dark-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-action:focus-visible {
	border-radius: 999px !important;
	outline: 2px solid #93c5fd !important;
	outline-offset: 3px !important;
}

.kol-apes-lightbox-action-rail .screen-reader-text {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	word-wrap: normal !important;
}

.kol-apes-lightbox-action-menu {
	background: #ffffff !important;
	border: 1px solid rgba(15, 23, 42, 0.12) !important;
	border-radius: 8px !important;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22) !important;
	display: none !important;
	min-width: 144px !important;
	padding: 6px !important;
	position: absolute !important;
	right: 58px !important;
	top: calc(100% - 58px) !important;
	z-index: 2 !important;
}

.kol-apes-lightbox-action-menu.is-open {
	display: grid !important;
	gap: 2px !important;
}

.kol-apes-lightbox-action-menu-item {
	background: transparent !important;
	border: 0 !important;
	border-radius: 6px !important;
	color: #111827 !important;
	cursor: pointer !important;
	font: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 9px 10px !important;
	text-align: left !important;
	white-space: nowrap !important;
}

.kol-apes-lightbox-action-menu-item:hover,
.kol-apes-lightbox-action-menu-item:focus-visible {
	background: #f3f4f6 !important;
	outline: 0 !important;
}

@media (max-width: 768px) {
	html.light-mode .kol-media-lightbox.kol-apes-lightbox-has-action-rail,
	html.dark-mode .kol-media-lightbox.kol-apes-lightbox-has-action-rail {
		flex-direction: column !important;
		gap: 10px !important;
	}

	.kol-apes-lightbox-action-rail {
		align-self: center !important;
		flex: 0 0 auto !important;
		width: min(100%, 360px) !important;
	}

	html.light-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-actions.kol-pec-icons,
	html.dark-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-actions.kol-pec-icons {
		flex-direction: row !important;
		gap: 8px !important;
		justify-content: center !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	html.light-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-action.kol-pec-icon,
	html.dark-mode .kol-apes-lightbox-action-rail .kol-apes-site-media-action.kol-pec-icon {
		width: 54px !important;
	}

	.kol-apes-lightbox-action-rail .kol-apes-site-media-action-button {
		height: 42px !important;
		width: 42px !important;
	}

	.kol-apes-lightbox-action-rail .kol-apes-site-media-icon {
		height: 21px !important;
		width: 21px !important;
	}

	.kol-apes-lightbox-action-menu {
		right: 8px !important;
		top: auto !important;
		bottom: 54px !important;
	}
}