/*!
 * havLightbox v0.4 (https://havoc.de)
 * Copyright (c) 2024-2026 René Nicolaus
 * Licensed under MIT (https://github.com/Havoc7891/havLightbox/blob/main/LICENSE)
 */

dialog.havlightbox {
  --havlightbox-backdrop: rgba(0, 0, 0, 0.6);
  --havlightbox-header-text: #ffffff;
  --havlightbox-button-text: rgba(255, 255, 255, 0.86);
  --havlightbox-button-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  --havlightbox-nav-overlay-shadow: var(--havlightbox-button-shadow);
  --havlightbox-image-shadow:
    10px 12px 20px -16px rgba(0, 0, 0, 0.28),
    2px 4px 8px -6px rgba(0, 0, 0, 0.18);
  --havlightbox-spinner-track: rgba(255, 255, 255, 0.25);
  --havlightbox-spinner-color: #7ca4f8;
  color-scheme: dark;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
}

dialog.havlightbox:focus {
  outline: none;
}

:root[data-theme="dark"] dialog.havlightbox,
body[data-theme="dark"] dialog.havlightbox,
body.theme-dark dialog.havlightbox,
body.dark-mode dialog.havlightbox {
  color-scheme: dark;
}

:root[data-theme="light"] dialog.havlightbox,
body[data-theme="light"] dialog.havlightbox,
body.theme-light dialog.havlightbox,
body.light-mode dialog.havlightbox {
  color-scheme: light;
  --havlightbox-backdrop: rgba(15, 23, 42, 0.32);
  --havlightbox-header-text: #111827;
  --havlightbox-button-text: rgba(17, 24, 39, 0.82);
  --havlightbox-button-shadow: none;
  --havlightbox-nav-overlay-shadow:
    0 1px 4px rgba(255, 255, 255, 0.75),
    0 0 1px rgba(255, 255, 255, 0.95);
  --havlightbox-image-shadow:
    10px 12px 20px -16px rgba(15, 23, 42, 0.14),
    2px 4px 8px -6px rgba(15, 23, 42, 0.08);
  --havlightbox-spinner-track: rgba(19, 36, 66, 0.2);
  --havlightbox-spinner-color: #3b82f6;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"])
    body:not([data-theme="dark"]):not(.theme-dark):not(.dark-mode)
    dialog.havlightbox {
    color-scheme: light;
    --havlightbox-backdrop: rgba(15, 23, 42, 0.32);
    --havlightbox-header-text: #111827;
    --havlightbox-button-text: rgba(17, 24, 39, 0.82);
    --havlightbox-button-shadow: none;
    --havlightbox-nav-overlay-shadow:
      0 1px 4px rgba(255, 255, 255, 0.75),
      0 0 1px rgba(255, 255, 255, 0.95);
    --havlightbox-image-shadow:
      10px 12px 20px -16px rgba(15, 23, 42, 0.14),
      2px 4px 8px -6px rgba(15, 23, 42, 0.08);
    --havlightbox-spinner-track: rgba(19, 36, 66, 0.2);
    --havlightbox-spinner-color: #3b82f6;
  }
}

.havlightbox-backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: var(--havlightbox-backdrop);
  opacity: 0;
}

@supports (-webkit-touch-callout: none) {
  .havlightbox-backdrop {
    height: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

.havlightbox-sheet {
  --havlightbox-height: clamp(4rem, 12vh, 8rem);
  --havlightbox-viewport-padding-x: 16px;
  --havlightbox-viewport-padding-y: 16px;
  --havlightbox-browser-width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: inline-grid;
  height: fit-content;
  width: fit-content;
  box-sizing: border-box;
  grid-template-rows: auto auto auto;
  opacity: 0;
  max-width: min(
    calc(100vw - 2 * var(--havlightbox-viewport-padding-x, 16px)),
    calc(100% + 32px)
  );
  max-height: calc(100vh - 2 * var(--havlightbox-viewport-padding-y, 16px));
  overflow: visible;
  color: var(--havlightbox-header-text);
}

dialog.havlightbox[open] .havlightbox-sheet {
  animation: sheetIn 0.22s ease forwards;
}

dialog.havlightbox.closing .havlightbox-sheet {
  animation: sheetOut 0.18s ease forwards;
}

dialog.havlightbox[open] .havlightbox-backdrop {
  animation: backdropIn 0.22s ease forwards;
}

dialog.havlightbox.closing .havlightbox-backdrop {
  animation: backdropOut 0.18s ease forwards;
}

@keyframes sheetIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sheetOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes backdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes backdropOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

body.havlightbox-open {
  overflow: hidden;
}

.havlightbox-content {
  display: grid;
  place-items: center;
  width: auto;
  min-height: 96px;
  overflow: visible;
  position: relative;
  isolation: isolate;
}

#havlightbox-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 96px;
  min-height: 96px;
  opacity: 1;
  transition: opacity 0.99s ease-in-out;
  object-fit: contain;
  box-shadow: var(--havlightbox-image-shadow);
}

.havlightbox-header,
.havlightbox-actions {
  color: var(--havlightbox-header-text);
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 6px 4px;
  min-width: 0;
  width: var(--havlightbox-browser-width, 100%);
  box-sizing: border-box;
  background: transparent;
  margin: 0 auto;
  justify-self: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.havlightbox-header-title {
  display: flex;
  /*justify-content: space-between;*/
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#havlightbox-title {
  overflow-wrap: anywhere;
}

.havlightbox-actions {
  border-bottom: none;
  justify-content: center;
  text-align: center;
  min-height: calc(1.3em + 12px);
  padding: 6px 4px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0));
}

.havlightbox-caption {
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
  max-width: 100%;
  color: var(--havlightbox-header-text);
  line-height: 1.3;
  min-height: 1.3em;
  margin: 0;
}

.havlightbox-content.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border: 3px solid var(--havlightbox-spinner-track);
  border-top-color: var(--havlightbox-spinner-color);
  border-radius: 50%;
  animation: havlightbox-spin 0.8s linear infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes havlightbox-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.icon-btn {
  border: none;
  background: transparent;
  color: var(--havlightbox-button-text);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 0;
  cursor: pointer;
  font-size: 1.25em;
  line-height: 1;
  text-shadow: var(--havlightbox-button-shadow);
  transition: color 0.18s ease;
}

.icon-btn:hover {
  color: var(--havlightbox-header-text);
}

.icon-btn:focus {
  outline: none;
}

dialog.havlightbox.havlightbox-keyboard-focus .icon-btn:focus {
  outline: 2px solid var(--havlightbox-spinner-color);
  outline-offset: 2px;
}

.icon-btn[hidden] {
  display: none;
}

.havlightbox-content > .icon-btn.nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 2rem;
  transform: translateY(-50%);
}

dialog.havlightbox:not(.havlightbox-nav-outside)
  .havlightbox-content
  > .icon-btn.nav {
  text-shadow: var(--havlightbox-nav-overlay-shadow);
}

.havlightbox-content > .icon-btn.nav-prev {
  left: clamp(8px, 3vw, 18px);
}

.havlightbox-content > .icon-btn.nav-next {
  right: clamp(8px, 3vw, 18px);
}

dialog.havlightbox.havlightbox-nav-outside
  .havlightbox-content
  > .icon-btn.nav-prev {
  left: calc(-1 * var(--havlightbox-nav-outside-offset, 48px));
}

dialog.havlightbox.havlightbox-nav-outside
  .havlightbox-content
  > .icon-btn.nav-next {
  right: calc(-1 * var(--havlightbox-nav-outside-offset, 48px));
}

@media (max-width: 900px), (max-height: 720px) {
  .havlightbox-content {
    max-height: calc(
      100vh - 2 * var(--havlightbox-viewport-padding-y, 16px) -
        var(--havlightbox-height, 8rem)
    );
  }

  #havlightbox-image {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: var(
      --mobile-max-height,
      calc(
        100vh - 2 * var(--havlightbox-viewport-padding-y, 16px) -
          var(--havlightbox-height, 8rem)
      )
    );
    object-fit: contain;
  }

  .havlightbox-actions {
    width: var(--havlightbox-browser-width, 100%);
    min-width: 0;
    max-width: calc(100vw - 2 * var(--havlightbox-viewport-padding-x, 16px));
    min-height: calc(1.2em + 12px);
    padding: 6px 4px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0));
  }

  .havlightbox-caption {
    min-width: 0;
    min-height: 1.2em;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    flex: 1 1 auto;
    line-height: 1.2;
    font-size: 0.9em;
  }
}