/* ====================================================================
   GLX Slider

   Der Kern des Ganzen ist die Bühne: ein Kasten mit FESTEM Maß, in dem
   alle Bilder übereinander liegen. Daraus folgt zweierlei, und beides ist
   Absicht:

   1. Hochkant und Quer gemischt gehen problemlos. Die Bühne gibt die
      Größe vor, nicht das Bild - deshalb springt nichts, wenn nach einem
      Querformat ein Hochformat kommt.

   2. Die Übergänge brauchen kein Umrechnen. Wer Bilder nebeneinander legt
      und den Streifen verschiebt, muss bei jedem Fensterwechsel neu
      rechnen. Übereinander genügt ein- und ausblenden.
   ==================================================================== */

.glx-sl {
	--glxsl-dauer: 700ms;
	--glxsl-rand: 14px;
	--glxsl-rahmen: 0px;
	--glxsl-rahmenfarbe: #bfa24f;
	--glxsl-zoom: 1;
	--glxsl-breite: 100%;
	/* Kein "none": min(100%, none) ist ungueltiges CSS, und eine ungueltige
	   Angabe faellt ganz weg - dann haette der Slider gar keine Grenze mehr.
	   Eine sehr grosse Zahl wirkt wie "ohne Grenze" und bleibt gueltig. */
	--glxsl-maxbreite: 100000px;
	--glxsl-hoehe: 420px;
	--glxsl-verhaeltnis: 16 / 9;
	--glxsl-gluehfarbe: #bfa24f;
	--glxsl-gluehstaerke: 0;

	position: relative;
	width: var(--glxsl-breite);
	/* Zwei Grenzen: nie breiter als der Textbereich, und nie breiter als
	   das eingestellte Höchstmaß. Ohne das zweite wächst der Slider mit
	   dem Textbereich mit - und sieht auf der Seite ganz anders aus als im
	   schmaleren Bearbeitungsbereich. */
	max-width: min(100%, var(--glxsl-maxbreite, 100000px));
	margin-left: auto;
	margin-right: auto;
	height: var(--glxsl-hoehe);
	border-radius: var(--glxsl-rand);
	border: var(--glxsl-rahmen) solid var(--glxsl-rahmenfarbe);
	overflow: hidden;
	background: #0d0f0d;

	/* Der Schein sitzt am Rahmen und wächst mit --glxsl-gluehstaerke.
	   Steht die auf 0, ist die Angabe wirkungslos - kein zweiter
	   Regelsatz nötig. */
	box-shadow:
		0 0 calc(var(--glxsl-gluehstaerke) * 1px) calc(var(--glxsl-gluehstaerke) * .18px) var(--glxsl-gluehfarbe),
		0 0 calc(var(--glxsl-gluehstaerke) * .4px) var(--glxsl-gluehfarbe) inset;
}

/* Ohne festes Maß bestimmt das Seitenverhältnis die Höhe. Der Slider
   wächst dann mit der Breite mit - auf dem Handy fast immer richtig.

   aspect-ratio wirkt nur, wenn die Höhe auf auto steht; deshalb steht sie
   hier ausdrücklich, und nicht bloß als Weglassen. */
.glx-sl.glx-sl-nach-verhaeltnis {
	height: auto;
	min-height: 0;
	aspect-ratio: var(--glxsl-verhaeltnis);
	/* Ein Deckel. Ohne ihn ergibt volle Breite mal 4:3 einen Kasten von
	   ueber tausend Punkten - der fuellt den ganzen Bildschirm. Vorher
	   begrenzte die feste Hoehe; die ist weggefallen, also braucht es
	   diese Grenze. */
	max-height: 70vh;
	/* Weich, sonst springt der Rahmen bei jedem Bildwechsel. Dieselbe
	   Dauer wie der Bilduebergang - dann laeuft beides zusammen. */
	transition: aspect-ratio var(--glxsl-dauer, .7s) ease;
}

.glx-sl.glx-sl-schatten {
	box-shadow:
		0 0 calc(var(--glxsl-gluehstaerke) * 1px) calc(var(--glxsl-gluehstaerke) * .18px) var(--glxsl-gluehfarbe),
		0 0 calc(var(--glxsl-gluehstaerke) * .4px) var(--glxsl-gluehfarbe) inset,
		0 22px 48px -24px rgba(0, 0, 0, .75);
}

/* --------------------------------------------------------------------
   Die Bühne und die Bilder
   -------------------------------------------------------------------- */

.glx-sl-buehne {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	inset: 0;
}

.glx-sl-bild {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity   var(--glxsl-dauer) ease,
		transform var(--glxsl-dauer) ease,
		visibility var(--glxsl-dauer);
}

.glx-sl-bild.ist-da {
	opacity: 1;
	visibility: visible;
	transform: none;
	z-index: 2;
}

.glx-sl-bild img {
	display: block;
	width: 100%;
	height: 100%;
	/* Einpassen statt beschneiden: Trifft der Deckel oben zu, soll das
	   Bild vollstaendig sichtbar bleiben. */
	object-fit: contain;
	transition: transform var(--glxsl-dauer) ease;
}

/* --------------------------------------------------------------------
   Wie das Bild in der Bühne sitzt

   Hier entscheidet sich, was mit gemischten Formaten passiert.
   -------------------------------------------------------------------- */

/* Füllen: Der Ausschnitt wird beschnitten, aber nichts verzerrt. Bei
   gemischten Hoch- und Querformaten ist das fast immer die richtige Wahl -
   jedes Bild füllt die Bühne vollständig. */
.glx-sl-p-fuellen .glx-sl-bild img { object-fit: cover; }

/* Welcher Teil erhalten bleibt, wenn beschnitten wird. Bei Porträts steht
   der Kopf oben - dann fehlt unten etwas, und das ist richtig so. */
.glx-sl-a-oben  .glx-sl-bild img { object-position: center top; }
.glx-sl-a-mitte .glx-sl-bild img { object-position: center center; }
.glx-sl-a-unten .glx-sl-bild img { object-position: center bottom; }

/* Ganz zeigen: Das Bild bleibt vollständig. Bei einem Hochformat in einer
   querformatigen Bühne blieben links und rechts Streifen - deshalb legt
   ::before dahinter dasselbe Bild groß und weichgezeichnet. Die Bühne ist
   dadurch gefüllt, ohne dass am Bild selbst etwas fehlt. */
.glx-sl-p-ganz .glx-sl-bild img { object-fit: contain; }
.glx-sl-p-ganz .glx-sl-bild::before {
	content: "";
	position: absolute;
	inset: -6%;
	background-image: var(--glxsl-fuellbild);
	background-size: cover;
	background-position: center;
	filter: blur(22px) brightness(.55) saturate(1.1);
	z-index: -1;
}

/* Dehnen: füllt aus und darf verzerren. Wer das will, weiß warum. */
.glx-sl-p-dehnen .glx-sl-bild img { object-fit: fill; }

/* --------------------------------------------------------------------
   Die Übergänge

   Jeder besteht aus einem Ruhezustand für das Bild, das kommt. Das Bild,
   das geht, verblasst dabei immer - alles andere sähe nach Ruckeln aus.
   -------------------------------------------------------------------- */

/* :not(.ist-da) ist hier kein Schnörkel, sondern der Kern.

   Ohne ihn haben diese Regeln dieselbe Spezifität wie .glx-sl-bild.ist-da
   und stehen weiter unten - dann gewinnen sie, und auch das sichtbare Bild
   bekommt den Ruheversatz. Es steht dann außerhalb der Bühne, und zu sehen
   ist es nur während es hindurchwandert.

   So gelesen sagen die Regeln auch das Richtige: Der Versatz ist der Platz
   außerhalb der Bühne, auf dem die wartenden Bilder stehen. */
.glx-sl-u-links      .glx-sl-bild:not(.ist-da) { transform: translateX(-100%); }
.glx-sl-u-rechts     .glx-sl-bild:not(.ist-da) { transform: translateX(100%); }
.glx-sl-u-oben       .glx-sl-bild:not(.ist-da) { transform: translateY(-100%); }
.glx-sl-u-unten      .glx-sl-bild:not(.ist-da) { transform: translateY(100%); }
.glx-sl-u-aufziehen  .glx-sl-bild:not(.ist-da) { transform: scale(1.25); }
.glx-sl-u-wegziehen  .glx-sl-bild:not(.ist-da) { transform: scale(.8); }

/* Schieben sieht aus wie ein Filmstreifen: Das gehende Bild wandert nach
   links hinaus, während das kommende von rechts hereinkommt. Dafür muss
   das gehende Bild sichtbar bleiben, solange es wandert. */
.glx-sl-u-schieben .glx-sl-bild:not(.ist-da) { transform: translateX(100%); }
.glx-sl-u-schieben .glx-sl-bild.geht {
	opacity: 1;
	visibility: visible;
	transform: translateX(-100%);
	z-index: 1;
}

/* Ohne Übergang: hart schneiden. */
.glx-sl-u-ohne .glx-sl-bild { transition: none; transform: none; }

/* Und zur Sicherheit: Was dran ist, steht immer in der Mitte. Diese Regel
   hat eine höhere Spezifität als jede Übergangsregel und macht damit
   unmöglich, dass derselbe Fehler durch eine neue Zeile zurückkehrt. */
.glx-sl .glx-sl-bild.ist-da { transform: none; }

/* --------------------------------------------------------------------
   Vergrößern beim Überfahren
   -------------------------------------------------------------------- */

.glx-sl-zoom:hover .glx-sl-bild.ist-da img,
.glx-sl-zoom:focus-within .glx-sl-bild.ist-da img {
	transform: scale(var(--glxsl-zoom));
}

/* --------------------------------------------------------------------
   Bildtext
   -------------------------------------------------------------------- */

.glx-sl-text {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	margin: 0;
	padding: 34px 18px 14px;
	color: #fff;
	font-size: .96rem;
	line-height: 1.4;
	text-align: center;
	background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, 0));
	z-index: 3;
}

/* --------------------------------------------------------------------
   Pfeile und Punkte

   Sie liegen ÜBER den Bildern und müssen anklickbar bleiben, auch wenn
   ein Bild gerade darüberwandert - daher der höhere z-index.
   -------------------------------------------------------------------- */

.glx-sl-pfeil {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 999px;
	background: rgba(0, 0, 0, .38);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, background .2s ease;
}

.glx-sl-pfeil svg {
	width: 22px; height: 22px;
	fill: none; stroke: currentColor;
	stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

.glx-sl-zurueck { left: 12px; }
.glx-sl-vor     { right: 12px; }

/* Sichtbar, solange die Maus im Bild ist.

   Hier stand :focus-within - und das hielt die Pfeile stehen, nachdem
   man einen angeklickt hatte: Der Klick gibt dem Knopf den Fokus, und
   der bleibt, auch wenn die Maus laengst weg ist.

   :focus-visible ueberlaesst dem Browser die Unterscheidung: nach einem
   Mausklick nichts, nach der Tabulatortaste den Fokus. Genau das war
   gemeint. */
.glx-sl:hover .glx-sl-pfeil,
.glx-sl:has( .glx-sl-pfeil:focus-visible ) .glx-sl-pfeil { opacity: 1; }
.glx-sl-pfeil:hover { background: rgba(0, 0, 0, .62); }
.glx-sl-pfeil:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }

/* Auf Geräten ohne Maus gibt es kein Überfahren - dort stehen die Pfeile
   dauerhaft, sonst kommt man nie an sie heran. */
@media (hover: none) {
	.glx-sl-pfeil { opacity: 1; }
}

.glx-sl-punkte {
	position: absolute;
	left: 0; right: 0; bottom: 12px;
	z-index: 5;
	display: flex;
	gap: 8px;
	justify-content: center;
}

.glx-sl-punkt {
	width: 10px; height: 10px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .65);
	border-radius: 999px;
	background: rgba(0, 0, 0, .3);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.glx-sl-punkt.ist-da {
	background: #fff;
	transform: scale(1.25);
}

.glx-sl-punkt:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --------------------------------------------------------------------
   Wer Bewegung abgeschaltet hat, bekommt den Wechsel ohne Bewegung. Das
   Weiterblättern bleibt, nur ruckelfrei statt wandernd.
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.glx-sl-bild,
	.glx-sl-bild img { transition: opacity .2s ease; transform: none !important; }
}

/* ===================================================== DAS POPUP

   Das gezeigte Bild noch einmal, gross und ueber allem. Es haengt am
   Slider, faengt aber keine Mausereignisse ab - sonst verdeckte es die
   Zeile, sobald es erscheint, und flackerte.

   Der Kasten selbst wird gehoben, solange das Popup offen ist. Ohne das
   liegt es hinter der naechsten Karte - genau der Fehler, der heute bei
   den Wyda-Lupen zwei Anlaeufe gebraucht hat. */
/* DAS POPUP DARF HINAUS.

   .glx-sl schneidet mit overflow:hidden alles ab, was ueber den Rahmen
   hinausragt - noetig, damit die Bilder in den runden Ecken sitzen.
   Fuer das Popup ist das toedlich: Es wird gebaut, es wird sichtbar,
   und dann bleibt nur der Teil innerhalb des Rahmens uebrig. Das sieht
   aus wie ein vergroessertes Bild - genau so ist es gemeldet worden.

   Also wandert das Abschneiden eine Ebene tiefer: Die Buehne schneidet,
   der Slider nicht mehr. Die Bilder sitzen weiterhin in den runden
   Ecken, das Popup haengt aber am Slider und kommt hinaus.

   Nur wenn das Popup eingeschaltet ist. Ein overflow, das man ueberall
   aendert, waere die naechste Ueberraschung an anderer Stelle. */
.glx-sl-pop { position: relative; overflow: visible; }
.glx-sl-pop > .glx-sl-buehne {
	overflow: hidden;
	border-radius: calc(var(--glxsl-rand, 0px) - var(--glxsl-rahmen, 0px));
}
.glx-sl-pop:hover, .glx-sl-pop:focus-within, .glx-sl-pop.ist-offen { z-index: 60; }

.glx-sl-lupe {
	/* FEST, nicht absolut.
	 *
	 * Absolut hiess: mittig ueber dem BILD. Bei einem Bild am unteren
	 * Seitenrand landete das Popup halb ausserhalb des Fensters.
	 * position:fixed rechnet gegen das Fenster - damit steht es immer in
	 * der Bildschirmmitte, egal wo das Bild sitzt.
	 *
	 * Und ein festes Element kann von keinem Elternelement abgeschnitten
	 * werden. */
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(.96);
	width: var(--glxsl-pop-breite, 520px);
	max-width: 92vw;
	/* Ein hochkantes Bild waere sonst hoeher als der Bildschirm. */
	max-height: 88vh;
	overflow: auto;
	/* Ueber allem. 70 stammte aus der Zeit, als das Popup nur den
	   eigenen Kasten ueberragen musste. Seit es fest im Fenster steht,
	   reicht es bis unter die Menueleiste - und die liegt auf 999. */
	z-index: 100001;
	padding: 8px;
	border-radius: var(--glxsl-pop-ecken, 14px);
	background: rgba(20, 22, 26, .92);
	border: 1px solid var(--glxsl-pop-rand, #38b6dd);
	box-shadow: 0 0 26px -4px var(--glxsl-pop-rand, #38b6dd),
	            0 24px 48px -18px rgba(0, 0, 0, .7);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.glx-sl-lupe img {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(88vh - 20px);
	object-fit: contain;
	border-radius: calc(var(--glxsl-pop-ecken, 14px) - 6px);
}

/* Beim Ueberfahren - aber nur, wenn nicht auf Klick gestellt. */
.glx-sl-pop:not(.glx-sl-pop-klick):hover .glx-sl-lupe,
.glx-sl-pop:not(.glx-sl-pop-klick):focus-within .glx-sl-lupe,
.glx-sl-pop.ist-offen .glx-sl-lupe {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}

/* Auf Geraeten ohne Maus zaehlt nur das Antippen: Dort loest ein
   :hover unzuverlaessig aus und bleibt danach haengen. */
@media (hover: none) {
	.glx-sl-pop:hover .glx-sl-lupe { opacity: 0; visibility: hidden; }
	.glx-sl-pop.ist-offen .glx-sl-lupe { opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
	.glx-sl-lupe { transition: none; }
}

/* ===================================================== DER LICHTKASTEN

   Ein Fenster ueber der ganzen Seite. Der Grund ist fast schwarz und
   nicht halbdurchsichtig grau: Ein Bild vor einer durchscheinenden
   Seite wirkt schmutzig, und die Aufmerksamkeit bleibt am Text
   dahinter haengen.

   Die Breite kommt als Variable vom Slider - in vw, wenn Prozent
   eingestellt ist, in px bei fester Groesse. Der Browser rechnet, wir
   muessen die Aufloesung nicht kennen. */
.glx-lk {
	position: fixed;
	/* Die vier Einzelangaben stehen vor der Kurzschreibweise: Safari kennt
	   "inset" erst ab 14.1. Ein aelteres iPad, das keine Aktualisierungen
	   mehr bekommt, saehe sonst ein Fenster ohne Groesse - also gar keins. */
	top: 0; right: 0; bottom: 0; left: 0;
	top: 0; right: 0; bottom: 0; left: 0;
	inset: 0;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px;
	/* Nicht schwarz. Ueblich ist ein fast undurchsichtiger Grund, damit
	   das Bild fuer sich steht - aber hier gibt es nichts zu lesen, und
	   die Seite dahinter ist ohnehin dunkel und weichgezeichnet. Das
	   Schwarz nimmt nur den Zusammenhang weg. */
	/* Durchsichtig. Wer 40 Prozent Groesse einstellt, will die uebrigen
	   60 Prozent sehen - sonst koennte er auch 100 einstellen. Die
	   Unschaerfe trennt Vorder- und Hintergrund, ohne zu verdecken. */
	background: transparent;
	-webkit-backdrop-filter: blur(3px);
	        backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility .18s ease;
}
.glx-lk.ist-offen { opacity: 1; visibility: visible; }

.glx-lk-buehne {
	/* Bezugspunkt fuer das Schliessen-X: Es gehoert an die Ecke DES
	   BILDES, nicht an den Fensterrand. Dort sucht man es, und dort
	   trifft man es auch mit dem Finger. */
	position: relative;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-height: 0;              /* sonst draengt das Bild die Leiste hinaus */
	max-width: 100%;
}
.glx-lk-buehne img {
	display: block;
	width: var(--glxlk-breite, 80vw);
	max-width: 100%;
	max-height: 78vh;           /* Hoehe geht vor Breite - sonst ragt es hinaus */
	height: auto;
	object-fit: contain;
	border-radius: var(--glxlk-ecken, 4px);
	box-shadow: 0 0 34px -6px var(--glxlk-rand, #000);
}
.glx-lk-text {
	color: #e8ebef;
	font-size: 14px;
	text-align: center;
	opacity: .85;
}

/* Das X und die Pfeile. Ohne Fuellung, damit sie das Bild nicht
   ueberladen - erst beim Ueberfahren treten sie hervor. */
.glx-lk-zu, .glx-lk-pfeil {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 4px;
	background: rgba(255, 255, 255, .07);
	color: #fff;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}
.glx-lk-zu:hover, .glx-lk-pfeil:hover {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .55);
}
.glx-lk-zu:focus-visible, .glx-lk-pfeil:focus-visible {
	outline: 2px solid #fff; outline-offset: 2px;
}
.glx-lk-zu svg, .glx-lk-pfeil svg { width: 22px; height: 22px; }

/* Das X wandert in die obere rechte Ecke des Bildes. Es steht ausserhalb
   der normalen Reihenfolge, deshalb bleibt es absolut - nur der
   Bezugspunkt ist jetzt die Buehne statt des Fensters. */
.glx-lk-zu {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	background: rgba(8,9,11,.72);
	backdrop-filter: blur(2px);
}
.glx-lk-zurueck { left: 16px;  top: 50%; transform: translateY(-50%); }
.glx-lk-vor     { right: 16px; top: 50%; transform: translateY(-50%); }

/* Die Leiste mit den Miniaturbildern - anstelle der Punkte. */
.glx-lk-mini {
	display: flex;
	gap: 6px;
	max-width: 100%;
	overflow-x: auto;
	padding: 4px 2px;
	flex: 0 0 auto;
	scrollbar-width: thin;
}
.glx-lk-mini button {
	flex: 0 0 auto;
	width: 74px;
	height: 52px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 3px;
	background: none;
	cursor: pointer;
	opacity: .55;
	overflow: hidden;
	transition: opacity .15s ease, border-color .15s ease;
}
.glx-lk-mini button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.glx-lk-mini button:hover { opacity: .85; }
.glx-lk-mini button.ist-da {
	opacity: 1;
	border-color: var(--glxlk-rand, #fff);
}

@media (max-width: 600px) {
	.glx-lk { padding: 52px 8px 12px; }
	.glx-lk-mini button { width: 56px; height: 40px; }
	.glx-lk-zurueck { left: 6px; }
	.glx-lk-vor     { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.glx-lk { transition: none; }
}

/* ===================================================================
   IM EDITOR NIE
   ===================================================================
   Die Lupe ist eine Vorschau fuer die fertige Seite. Im Editor liegt sie
   ueber dem Bild, das man bearbeiten will - beim Ueberfahren, und
   ueberfahren tut man ein Bild, das man anklicken will, immer.

   Ich habe sie aus der Editorvorschau entfernt. Diese Regel ist der
   Riegel dahinter: Sollte sie doch einmal auftauchen - aus einem
   zwischengespeicherten Skript, aus einer aelteren Fassung -, bleibt sie
   im Editor unsichtbar.

   Die Vorschau gibt es auf Knopfdruck im Seitenmenue.
   =================================================================== */
/* NUR diese beiden. Ein dritter Selektor auf .wp-block-glx-slider haette
   auch die fertige Seite getroffen - diese Klasse traegt der Block dort
   ebenfalls, und die Lupe waere ueberall weg gewesen. */
.block-editor-block-list__layout .glx-sl-lupe,
.editor-styles-wrapper .glx-sl-lupe {
	display: none !important;
}

/* Und der Zeiger soll im Editor nicht so tun, als koenne man etwas
   oeffnen. */
.block-editor-block-list__layout .glx-sl-pop,
.editor-styles-wrapper .glx-sl-pop {
	cursor: default;
}