/**
 * PopFeed styles.
 *
 * Everything is wrapped in :where() so it has zero specificity: your template, Bootstrap classes
 * (form-control, btn, alert) and the "link class" / "form class" options always win.
 * Customise colours with the custom properties below, e.g. in your template's user.css:
 *   .popfeed { --popfeed-accent: #b4005a; }
 *
 * To override this whole file, copy it to templates/YOUR_TEMPLATE/css/plg_content_popfeed/popfeed.css
 */

:where(.popfeed) {
  --popfeed-accent: var(--cassiopeia-color-link, var(--bs-link-color, LinkText));
  --popfeed-bg: var(--bs-body-bg, Canvas);
  --popfeed-fg: var(--bs-body-color, CanvasText);
  --popfeed-border: color-mix(in srgb, currentColor 25%, transparent);
  --popfeed-radius: .5rem;
  --popfeed-gap: .875rem;
}

/* Trigger: looks like a link unless a class such as "btn btn-primary" is set in the options. */
:where(.popfeed-trigger) {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--popfeed-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

:where(.popfeed-trigger:focus-visible) {
  outline: 2px solid var(--popfeed-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

:where(summary.popfeed-trigger) {
  display: inline-block;
  list-style: none;
}

:where(summary.popfeed-trigger)::-webkit-details-marker {
  display: none;
}

/* Fields */
:where(.popfeed .popfeed_form_pre_text) > :first-child {
  margin-top: 0;
}

:where(.popfeed .popfeed_field) {
  display: grid;
  gap: .3rem;
  margin-bottom: var(--popfeed-gap);
}

:where(.popfeed .popfeed_field > label) {
  font-weight: 600;
  font-size: .925em;
}

:where(.popfeed .popfeed-required) {
  color: #c0262d;
}

:where(.popfeed .popfeed-form) :where(input[type="text"], input[type="email"], textarea) {
  box-sizing: border-box;
  width: 100%;
  padding: .5rem .7rem;
  font: inherit;
  color: inherit;
  background: var(--popfeed-bg);
  border: 1px solid var(--popfeed-border);
  border-radius: var(--popfeed-radius);
}

:where(.popfeed .popfeed-form textarea) {
  min-height: 8rem;
  resize: vertical;
}

:where(.popfeed .popfeed-form) :where(input, textarea):focus-visible {
  outline: 2px solid var(--popfeed-accent);
  outline-offset: 1px;
}

/* Messages */
:where(.popfeed .popfeed_messages:empty) {
  display: none;
}

:where(.popfeed .popfeed_messages > div) {
  margin-bottom: var(--popfeed-gap);
  padding: .65rem .9rem;
  border-radius: var(--popfeed-radius);
  border-left: 4px solid #2e7d32;
  background: color-mix(in srgb, #2e7d32 10%, transparent);
}

:where(.popfeed .popfeed_messages > .popfeed_error) {
  border-left-color: #c0262d;
  background: color-mix(in srgb, #c0262d 10%, transparent);
}

/* While an AJAX submission is in progress */
:where(.popfeed .popfeed-form[aria-busy="true"]) :where(input[type="submit"], button[type="submit"]) {
  opacity: .7;
  cursor: progress;
}

/* Dialog mode */
:where(.popfeed-dialog) {
  box-sizing: border-box;
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 1.75rem 1.5rem 1rem;
  color: var(--popfeed-fg);
  background: var(--popfeed-bg);
  border: 0;
  border-radius: calc(var(--popfeed-radius) * 1.5);
  box-shadow: 0 1.25rem 3rem rgb(0 0 0 / .3);
}

:where(.popfeed-dialog:focus) {
  outline: none;
}

/* With a captcha the dialog opens non-modal (see popfeed.js): captcha challenges such as reCAPTCHA's
   image pop-up are added at the end of the page and would otherwise be stuck behind a modal dialog.
   The page is dimmed with a large shadow instead of ::backdrop, which only modal dialogs have. */
:where(.popfeed-dialog[data-popfeed-nonmodal][open]) {
  position: fixed;
  inset: 0;
  z-index: 10000;
  height: fit-content;
  margin: auto;
  overflow: auto;
  box-shadow: 0 1.25rem 3rem rgb(0 0 0 / .3), 0 0 0 100vmax rgb(15 18 25 / .6);
}

:where(.popfeed-dialog)::backdrop {
  background: rgb(15 18 25 / .6);
}

/* The close button is ours alone, so it uses a normal selector to win over template button styles. */
.popfeed-close {
  position: absolute;
  top: .4rem;
  right: .5rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.popfeed-close:hover,
.popfeed-close:focus-visible {
  background: color-mix(in srgb, currentColor 10%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  :where(.popfeed-dialog[open]) {
    animation: popfeed-in .18s ease-out;
  }

  @keyframes popfeed-in {
    from { opacity: 0; transform: translateY(.75rem) scale(.98); }
    to   { opacity: 1; transform: none; }
  }
}

/* Toggle mode */
:where(.popfeed-details[open] .popfeed-panel) {
  margin-top: var(--popfeed-gap);
}

/* Fixed position link */
:where(.popfeed_fixed) {
  position: fixed;
  z-index: 1000;
  max-width: min(24rem, calc(100vw - 1rem));
  max-height: calc(100dvh - 1rem);
  overflow: auto;
  padding: .5rem .75rem;
  background: var(--popfeed-bg);
  border: 1px solid var(--popfeed-border);
  border-radius: var(--popfeed-radius);
  box-shadow: 0 .25rem 1rem rgb(0 0 0 / .12);
}

:where(.popfeed_fixed.top)    { top: 10%; }
:where(.popfeed_fixed.middle) { top: 45%; }
:where(.popfeed_fixed.bottom) { bottom: 10%; }
:where(.popfeed_fixed.left)   { left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
:where(.popfeed_fixed.right)  { right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }