/*
 * Pixel Demo Section overlay. Values here are the defaults (= the live
 * divi-pixel.com demo rows); the section's own settings print more specific
 * `.et_pb_section_N .dipi-demo-section__*` rules through Divi's style pipeline.
 * Keep in sync with DEFAULTS in js/dpds-builder.js.
 */
.dipi-demo-section {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	display: flex;
	opacity: 0;
	visibility: hidden; /* Hidden buttons must not catch clicks. */
	transform: translateX(-50px);
	transition: opacity 0.5s, transform 0.5s, visibility 0s 0.5s;
}

/* .is-visible: compact overlays live outside their section (js/dpds-frontend.js). */
.et_pb_section:hover > .dipi-demo-section,
.dipi-demo-section:focus-within,
.dipi-demo-section.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

/* No hover on touch screens: always show. */
@media (hover: none) {
	.dipi-demo-section {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

.dipi-demo-section__label,
.dipi-demo-section__button {
	display: flex;
	align-items: center;
	padding: 12px 14px;
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7em;
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
}

.dipi-demo-section__label {
	background-color: #15022a;
}

.dipi-demo-section__button {
	background-color: #ff4200;
}

/* :where() keeps this below the section's own colour rule: a custom colour
   without a custom hover colour then stays put on hover (as in the builder). */
:where(.dipi-demo-section__button):hover {
	background-color: rgba(255, 66, 0, 0.85);
}

.dipi-demo-section__icon {
	margin-right: 6px;
	font-style: normal;
	line-height: 1;
}

/*
 * Auto mode (demo network): a round black download button. On hover / focus
 * (focus = tap on touch screens) a white pill slides out below it with a
 * section and a page download icon, each with a tooltip.
 *
 * On the frontend the overlay is moved out of its section into
 * .dipi-demo-sections-layer (above fixed headers) and pinned to the section's
 * top left; in the builder it stays inside the section. The extra
 * .dipi-demo-section class keeps these rules above the section's own
 * `.et_pb_section_N .dipi-demo-section__button` style output.
 */
.dipi-demo-sections-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 2147483000;
}

.dipi-demo-section--compact {
	flex-direction: column;
	align-items: center;
	width: 44px;
	margin: 16px 0 0 16px;
	pointer-events: none; /* Only the visible parts take the pointer. */
}

/* The white pill, grown from behind the black circle. */
.dipi-demo-section--compact::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 44px;
	border-radius: 22px;
	background-color: #ffffff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transition: height 0.35s ease, opacity 0.2s;
}

.dipi-demo-section--compact:hover::before,
.dipi-demo-section--compact:focus-within::before {
	height: 100%;
	opacity: 1;
}

.dipi-demo-section__toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #000000;
	color: #ffffff;
	font-size: 20px;
	cursor: pointer;
	pointer-events: auto;
}

.dipi-demo-section__toggle .dipi-demo-section__icon {
	margin: 0;
}

.dipi-demo-section__menu {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 6px 0 4px;
	visibility: hidden;
	transition: visibility 0s 0.35s;
}

.dipi-demo-section--compact:hover .dipi-demo-section__menu,
.dipi-demo-section--compact:focus-within .dipi-demo-section__menu {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.dipi-demo-section.dipi-demo-section--compact .dipi-demo-section__button {
	position: relative;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	background-color: transparent;
	color: #000000;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity 0.25s, transform 0.25s, background-color 0.2s;
}

.dipi-demo-section.dipi-demo-section--compact:hover .dipi-demo-section__button,
.dipi-demo-section.dipi-demo-section--compact:focus-within .dipi-demo-section__button {
	opacity: 1;
	transform: none;
}

.dipi-demo-section.dipi-demo-section--compact .dipi-demo-section__button + .dipi-demo-section__button {
	transition-delay: 0.06s;
}

.dipi-demo-section.dipi-demo-section--compact .dipi-demo-section__button:hover,
.dipi-demo-section.dipi-demo-section--compact .dipi-demo-section__button:focus-visible {
	background-color: #e6e6e6;
	transition-delay: 0s;
}

.dipi-demo-section__button svg {
	display: block;
	width: 22px;
	height: 22px;
}

/* The ring that frees the download badge from the page lines: always the
   button's own background colour. */
.dipi-demo-section__button .dpds-knockout {
	fill: #ffffff;
	transition: fill 0.2s;
}

.dipi-demo-section__button:hover .dpds-knockout,
.dipi-demo-section__button:focus-visible .dpds-knockout {
	fill: #e6e6e6;
}

/* Tooltip (text from data-tooltip) with a small arrow pointing at the icon. */
.dipi-demo-section--compact .dipi-demo-section__button::before,
.dipi-demo-section--compact .dipi-demo-section__button::after {
	position: absolute;
	top: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
}

.dipi-demo-section--compact .dipi-demo-section__button::before {
	content: "";
	left: calc(100% + 8px);
	border: 6px solid transparent;
	border-right-color: #000000;
	border-left-width: 0;
	transform: translate(-4px, -50%);
}

.dipi-demo-section--compact .dipi-demo-section__button::after {
	content: attr(data-tooltip);
	left: calc(100% + 14px);
	padding: 6px 10px;
	border-radius: 6px;
	background-color: #000000;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transform: translate(-4px, -50%);
}

.dipi-demo-section--compact .dipi-demo-section__button:hover::before,
.dipi-demo-section--compact .dipi-demo-section__button:hover::after,
.dipi-demo-section--compact .dipi-demo-section__button:focus-visible::before,
.dipi-demo-section--compact .dipi-demo-section__button:focus-visible::after {
	opacity: 1;
	transform: translate(0, -50%);
}