@charset "utf-8";

.toggletip { --background-color: var(--surface-tertiary); --width: 20rem; --triangle-size: 0.75rem; --triangle-spacing: 0.5rem; --border-size: 0.0625rem; --border-color: var(--surface-tertiary); display: inline-flex; position: relative; }

.toggletip::after { background-color: var(--background-color); border: var(--border-size) solid var(--border-color); content: ""; height: var(--triangle-size); margin: auto; opacity: 0; position: absolute; transform: rotate(45deg); transition: opacity 0.2s ease-in-out; width: var(--triangle-size); z-index: 3; }

.toggletip:has(.is-visible)::after { opacity: 1; }

.toggletip[tip-position="top"]::after { border-width: 0 var(--border-size) var(--border-size) 0; left: 0px; right: 0px; top: calc(var(--triangle-size)/-2 - var(--triangle-spacing)); }

.toggletip[tip-position="bottom"]::after { border-width: var(--border-size) 0 0 var(--border-size); bottom: calc(var(--triangle-size)/-2 - var(--triangle-spacing)); left: 0px; right: 0px; }

.toggletip[tip-position="right"]::after { border-width: 0 0 var(--border-size) var(--border-size); right: calc(var(--triangle-size)/-2 - var(--triangle-spacing)); top: calc(50% - var(--triangle-size)/2); }

.toggletip[tip-position="left"]::after { border-width: var(--border-size) var(--border-size) 0 0; left: calc(var(--triangle-size)/-2 - var(--triangle-spacing)); top: calc(50% - var(--triangle-size)/2); }

.toggletip__close { position: absolute; right: 0px; top: 0px; }

.toggletip__content { --x: -50%; --y: 0.25rem; background-color: var(--background-color); border: var(--border-size) solid var(--border-color); border-radius: 0.25rem; box-shadow: rgba(0, 0, 0, 0.1) 0px 0.25rem 0.5rem; color: rgb(1, 12, 6); display: none; inline-size: var(--width); inset-block-end: calc(100% + var(--triangle-size)); inset-inline-start: 50%; margin-inline: var(--margin-inline,0); max-inline-size: min(var(--width),100vw - 3rem); opacity: 0; padding: 1rem; position: absolute; transform: translateX(var(--x,0)) translateY(var(--y,0)); transition: opacity 0.2s ease-in-out; z-index: 3; font-size: 0.875rem !important; }

.toggletip__content .rte { font-size: 0.875rem; }

.toggletip__content.is-active { display: block; }

.toggletip__content.is-visible { opacity: 1; }

[tip-position="bottom"] .toggletip__content { --x: -50%; --y: -0.25rem; inset: calc(100% + var(--triangle-size)) 0 auto 50%; }

[tip-position="right"] .toggletip__content { --x: -0.25rem; --y: 50%; inset: auto auto 50% calc(100% + var(--triangle-size)); }

[tip-position="left"] .toggletip__content { --x: 0.25rem; --y: 50%; inset: auto calc(100% + var(--triangle-size)) 50% auto; }