@charset "UTF-8";
/* =============================================================================
   Panel + Trigger — Frontend Runtime Styles
   JS adds/removes `.is-open` on `.motto-panel-trigger` (the root block).
   Two panel types, driven by `data-panel-type` on the root:
     modal  → __panel at one of 9 viewport anchor points, fade animation
     drawer → __panel slides in from a viewport edge
   __panel-bg-overlay is the full-viewport backdrop (separate fixed element).
   ============================================================================= */
.motto-panel-trigger {
  --pt-gap: 0.75rem;
  --transition-duration: 400ms;
  position: relative;
  width: fit-content;
}
.motto-panel-trigger :where(.motto-panel-trigger__trigger) {
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: none;
}
.motto-panel-trigger :where(.motto-panel-trigger__trigger):where(:focus) {
  outline: none;
}
.motto-panel-trigger :where(.motto-panel-trigger__label) {
  display: inline;
}
.motto-panel-trigger :where(.motto-panel-trigger__icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
}
.motto-panel-trigger :where(.motto-panel-trigger__icon) :where(.motto-panel-trigger__icon-media,
.motto-panel-trigger__icon-media-inline,
.motto-panel-trigger__icon-media-inline svg) {
  width: 100%;
  height: 100%;
}
.motto-panel-trigger :is(.motto-panel-trigger__panel-bg-overlay) {
  position: fixed;
  inset: 0;
  z-index: 19;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-duration, 300ms) ease, visibility 0s linear var(--transition-duration, 300ms);
}
.motto-panel-trigger :is(.motto-panel-trigger__panel-bg-overlay) :where(.motto-panel-trigger__panel-bg-fill) {
  position: absolute;
  inset: 0;
}
.motto-panel-trigger :is(.motto-panel-trigger__panel) {
  position: fixed;
  z-index: 20;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  max-width: 100dvw;
  box-sizing: border-box;
  transition: opacity var(--transition-duration, 300ms) ease, transform var(--transition-duration, 300ms) ease, visibility 0s linear var(--transition-duration, 300ms);
}
.motto-panel-trigger :where(.motto-panel-trigger__close) {
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}
.motto-panel-trigger :where(.motto-panel-trigger__close):where(:focus) {
  outline: none;
}
.motto-panel-trigger[data-panel-type=modal][data-panel-position=bottom-left] :where(.motto-panel-trigger__panel) {
  bottom: var(--pt-gap);
  left: var(--pt-gap);
}
.motto-panel-trigger[data-panel-type=modal][data-panel-position=bottom-center] :where(.motto-panel-trigger__panel) {
  bottom: var(--pt-gap);
  left: 50%;
  transform: translateX(-50%);
}
.motto-panel-trigger[data-panel-type=modal][data-panel-position=bottom-right] :where(.motto-panel-trigger__panel) {
  bottom: var(--pt-gap);
  right: var(--pt-gap);
}
.motto-panel-trigger[data-panel-type=modal][data-panel-position=top-left] :where(.motto-panel-trigger__panel) {
  top: var(--pt-gap);
  left: var(--pt-gap);
}
.motto-panel-trigger[data-panel-type=modal][data-panel-position=top-center] :where(.motto-panel-trigger__panel) {
  top: var(--pt-gap);
  left: 50%;
  transform: translateX(-50%);
}
.motto-panel-trigger[data-panel-type=modal][data-panel-position=top-right] :where(.motto-panel-trigger__panel) {
  top: var(--pt-gap);
  right: var(--pt-gap);
}
.motto-panel-trigger[data-panel-type=modal][data-panel-position=center-left] :where(.motto-panel-trigger__panel) {
  top: 50%;
  left: var(--pt-gap);
  transform: translateY(-50%);
}
.motto-panel-trigger[data-panel-type=modal][data-panel-position=center-center] :where(.motto-panel-trigger__panel) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.motto-panel-trigger[data-panel-type=modal][data-panel-position=center-right] :where(.motto-panel-trigger__panel) {
  top: 50%;
  right: var(--pt-gap);
  transform: translateY(-50%);
}
.motto-panel-trigger[data-panel-type=drawer]:is(.is-open, .motto-panel-trigger--editor-preview) :where(.motto-panel-trigger__panel) {
  transform: translate(0, 0) !important;
}
.motto-panel-trigger[data-panel-type=drawer] :where(.motto-panel-trigger__panel) {
  opacity: 1 !important;
}
.motto-panel-trigger[data-panel-type=drawer][data-panel-position=left] :where(.motto-panel-trigger__panel) {
  top: 0;
  left: 0;
  height: 100dvh;
  transform: translateX(-100%);
}
.motto-panel-trigger[data-panel-type=drawer][data-panel-position=right] :where(.motto-panel-trigger__panel) {
  top: 0;
  right: 0;
  height: 100dvh;
  transform: translateX(100%);
}
.motto-panel-trigger[data-panel-type=drawer][data-panel-position=top] :where(.motto-panel-trigger__panel) {
  top: 0;
  left: 0;
  width: 100vw;
  transform: translateY(-100%);
}
.motto-panel-trigger[data-panel-type=drawer][data-panel-position=bottom] :where(.motto-panel-trigger__panel) {
  bottom: 0;
  left: 0;
  width: 100vw;
  transform: translateY(100%);
}
.motto-panel-trigger:is(.is-open, .motto-panel-trigger--editor-preview) :where(.motto-panel-trigger__panel-bg-overlay) {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition: opacity var(--transition-duration, 300ms) ease;
}
.motto-panel-trigger:is(.is-open, .motto-panel-trigger--editor-preview) :where(.motto-panel-trigger__panel) {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition: opacity var(--transition-duration, 300ms) ease, transform var(--transition-duration, 300ms) ease;
}