/*****************************************************************************************************
* bub Modal: CSS
******************************************************************************************************/

/* The modals' position, size and motion, as plain rules, and their look, in
:where() and through custom properties, so a theme's rule wins without a
fight over specificity. The close button and the links without a class are
the exceptions: their rules carry a class's weight, so a theme's rules for
every button or link do not reach them. The custom properties are only read,
never set here, so a theme may set them on :root as well as on a modal. Space
and widths around text are in em, so they grow with the modal's text; the
close button, a click target, and the room kept for it are in pixels. A
closed modal has the inert attribute and is hidden by visibility, laid out
like an open one; an opening one gets bubmodal--open a frame after the
attribute goes, and a closing one loses it before the attribute comes back,
so each style's transition runs both ways. The script sets each open modal's
z-index. */

/*
Common
---------------------------------------------------------------------------------------------------- */

/* Triggers, the old plugin's class included */

[class*="bubmodal-trigger--"],
[class*="bub-modal-trigger--"] {
  cursor: pointer;
}

/* Modal: fixed on the screen, scrolling on its own. Without specificity, so
   that each style's rules below set their own position and size. */

:where(.bubmodal) {
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
  position: fixed;
}

/* Closed: hidden by visibility, not display, so the content keeps its size
   for scripts that measure it when the page loads, such as a slider's. The
   rule weighs two classes, so a theme's visibility for one modal does not
   show it closed. */

.bubmodal[inert] {
  visibility: hidden;
}

.bubmodal__title:focus {
  outline: none;
}

:where(.bubmodal) {
  hyphens: auto;
}

/* Links without a class take the modal's color, with a class's weight as in
   the old plugin: a theme's color for every link is made for its page and can
   be unreadable on a dark modal. Links with a class, such as WordPress's
   buttons, keep their own color, which belongs to their own background. */

.bubmodal :where(a:not([class])) {
  color: inherit;
}

/* Backdrop: the element before a modal with a backdrop, transparent and
   passed through by clicks until the modal opens. It fades in, and catches
   the clicks on the page behind, while the modal is open; its pointer says
   that a click closes the modal. */

.bubmodal-backdrop {
  background-color: transparent;
  inset: 0;
  pointer-events: none;
  position: fixed;
  transition: background-color 300ms;
}

.bubmodal-backdrop:has(+ .bubmodal--open) {
  background-color: var(--bubmodal-backdrop, rgb(0 0 0 / 0.5));
  pointer-events: auto;
}

.bubmodal-backdrop:has(+ .bubmodal--close-outside.bubmodal--open) {
  cursor: pointer;
}

/* Content */

:where(.bubmodal__title) {
  margin: 0 0 1em;
  text-align: center;
}

:where(.bubmodal__title) :where(h1, h2) {
  font-size: 1.35rem;
  font-weight: bold;
  line-height: 1.3;
  margin: 0;
}

:where(.bubmodal__content) h3 {
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1.3;
  margin: 0.5em 0 0.3em;
}

:where(.bubmodal__before) p {
  margin: 0 0 0.5em;
}

/* Close: a square with an X drawn by two bars; the font size scales both,
   the bars' height sets the X's thickness and their width its size. The
   button's text is for screen readers only. */

.bubmodal__close {
  background: transparent;
  border: none;
  color: transparent;
  cursor: pointer;
  font-size: 16px;
  height: 5em;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  text-indent: 200%;
  top: 0;
  transition: none;
  white-space: nowrap;
  width: 5em;
  z-index: 1;
}

.bubmodal__close::before,
.bubmodal__close::after {
  content: '';
  left: 50%;
  position: absolute;
  top: 50%;
  transform-origin: center;
}

/* The X takes the text color of the dark layer here, and below that of a
   panel or box. */

:where(.bubmodal__close)::before,
:where(.bubmodal__close)::after {
  background-color: var(--bubmodal-cover-color, #ddd);
  height: 0.15em;
  width: 70%;
}

.bubmodal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.bubmodal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* A closing modal loses its close button at once: a full modal's sits in the
   screen's corner and would travel across the screen as the modal shrinks. */

.bubmodal:not(.bubmodal--open) .bubmodal__close {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {

  div.bubmodal,
  .bubmodal-backdrop {
    transition: none;
  }
}


/*
Styles
---------------------------------------------------------------------------------------------------- */

/* Full and boxed: the whole screen, the content centered. */

body:has(.bubmodal--cover.bubmodal--open) {
  overflow: hidden;
}

.bubmodal--cover {
  height: 100%;
  inset: 0;
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.2s, opacity 0.2s;
  width: 100%;
}

/* Content taller than the screen starts at the top, where plain center would
   push its start out of reach of the scrollbar; center stays as the fallback
   for a browser without the keyword. */

.bubmodal--cover {
  align-items: center;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  justify-content: safe center;
}

.bubmodal--cover.bubmodal--open {
  opacity: 1;
  transform: scale(1);
}

:where(.bubmodal--cover) {
  background: var(--bubmodal-cover-background, rgb(0 0 0 / 0.85));
  color: var(--bubmodal-cover-color, #ddd);
  padding: 80px 3vw;
}

.bubmodal--cover .bubmodal__content {
  position: relative;
}

@media screen and (max-width: 1000px) {

  :where(.bubmodal--cover) .bubmodal__close {
    font-size: 13px;
  }
}

/* Narrow and low screens, phones upright and sideways: the content starts at
   the top, 25px below the close button, or 10px below the larger one of a
   low screen wider than 1000px. A phone's keyboard covers the lower half, so
   a field in the middle left its dropdown, such as a live search's results,
   under it. */

@media screen and (max-width: 800px), screen and (max-height: 500px) {

  .bubmodal--cover {
    justify-content: flex-start;
  }

  :where(.bubmodal--cover) {
    padding-top: 90px;
  }
}

:where(.bubmodal--boxed .bubmodal__content) {
  background: var(--bubmodal-box-background, #f2f2f2);
  box-shadow: 1px 1px 20px #00000077;
  color: var(--bubmodal-box-color, #222);
  max-width: 40em;
  padding: 2.1em min(2.7em, 5%);
}

@media screen and (max-width: 500px) {

  :where(.bubmodal--boxed) {
    padding-inline: 0;
  }

  :where(.bubmodal--boxed .bubmodal__content) {
    box-shadow: none;
  }
}

/* Panels: left, right and bottom, sliding in from their edge. */

.bubmodal--panel {
  overflow-x: hidden;
  transition: transform 0.3s ease;
  width: 100%;
}

:where(.bubmodal--panel) {
  background: var(--bubmodal-panel-background, #f2f2f2);
  color: var(--bubmodal-panel-color, #222);
  scroll-behavior: smooth;
  scrollbar-color: var(--bubmodal-scrollbar, #c4c4c4) transparent;
  scrollbar-width: thin;
}

/* The close button of panels and boxes: a tinted square in the corner, its X
   in the text color of the panel or box, so it follows a theme's colors. */

:where(.bubmodal--panel, .bubmodal--float) .bubmodal__close {
  background: rgb(0 0 0 / 0.07);
  font-size: 40%;
}

:where(.bubmodal--panel, .bubmodal--float) .bubmodal__close::before,
:where(.bubmodal--panel, .bubmodal--float) .bubmodal__close::after {
  height: 0.25em;
  width: 65%;
}

:where(.bubmodal--panel) .bubmodal__close::before,
:where(.bubmodal--panel) .bubmodal__close::after {
  background-color: var(--bubmodal-panel-color, #222);
}

:where(.bubmodal--float) .bubmodal__close::before,
:where(.bubmodal--float) .bubmodal__close::after {
  background-color: var(--bubmodal-box-color, #222);
}

.bubmodal--left,
.bubmodal--right {
  height: 100%;
  max-width: 25em;
}

.bubmodal--left {
  inset: 0 auto 0 0;
  transform: translateX(-100%);
}

.bubmodal--right {
  inset: 0 0 0 auto;
  transform: translateX(100%);
}

.bubmodal--left.bubmodal--open,
.bubmodal--right.bubmodal--open {
  transform: translateX(0);
}

:where(.bubmodal--left) {
  box-shadow: 2px 0 20px rgb(0 0 0 / 0.25);
}

:where(.bubmodal--right) {
  box-shadow: -2px 0 20px rgb(0 0 0 / 0.25);
}

:where(.bubmodal--left .bubmodal__content, .bubmodal--right .bubmodal__content) {
  padding: 50px 1.25em 2.2em;
}

.bubmodal--right .bubmodal__close {
  left: 0;
  right: auto;
}

/* Narrow screens: the side panels fill the screen and scale in. */

@media screen and (max-width: 800px) {

  .bubmodal--left,
  .bubmodal--right {
    inset: 0;
    max-width: 100%;
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.2s, opacity 0.2s;
  }

  .bubmodal--left.bubmodal--open,
  .bubmodal--right.bubmodal--open {
    opacity: 1;
    transform: scale(1);
  }
}

.bubmodal--bottom {
  inset: auto 0 0 0;
  max-height: 100%;
  min-height: min(80vh, 200px);
  transform: translateY(100%);
}

.bubmodal--bottom.bubmodal--open {
  transform: translateY(0);
}

:where(.bubmodal--bottom) {
  box-shadow: 0 -2px 20px rgb(0 0 0 / 0.25);
}

:where(.bubmodal--bottom .bubmodal__content) {
  padding: min(5vh, 2.5em) min(5vw, 2.5em);
}

/* Free and center: a box of its own, at the bottom left, where a theme moves
   it, or in the middle. Content taller than the screen scrolls inside it,
   where its top would be out of reach above the screen. */

.bubmodal--float {
  max-height: 100%;
  max-width: min(100%, 40em);
  min-height: min(80vh, 280px);
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.2s, opacity 0.2s;
  width: 100%;
}

.bubmodal--float.bubmodal--open {
  opacity: 1;
  transform: scale(1);
}

.bubmodal--free {
  inset: auto auto 0 0;
}

:where(.bubmodal--float) {
  background: var(--bubmodal-box-background, #f2f2f2);
  box-shadow: 0 2px 20px rgb(0 0 0 / 0.25);
  color: var(--bubmodal-box-color, #222);
}

:where(.bubmodal--float .bubmodal__content) {
  padding: min(5vh, 2.5em) min(5vw, 2.5em);
}

.bubmodal--center {
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%) scale(0.5);
}

.bubmodal--center.bubmodal--open {
  transform: translate(-50%, -50%) scale(1);
}