/*
 * Font-independent controls for the legacy LightGallery 1.x viewer.
 * The original theme expects a missing `lg` icon font. These controls use
 * inline SVG masks instead, so they keep working offline and after deploys.
 */
.lg-icon,
.lg-actions .lg-next,
.lg-actions .lg-prev {
  font-family: Arial, Helvetica, sans-serif !important;
}

.lg-icon::before,
.lg-icon::after,
.lg-actions .lg-next::before,
.lg-actions .lg-next::after,
.lg-actions .lg-prev::before,
.lg-actions .lg-prev::after {
  content: "" !important;
}

.lg-toolbar .lg-icon::after,
.lg-actions .lg-next::before,
.lg-actions .lg-prev::after,
.lg-outer .lg-toogle-thumb::after {
  display: block;
  width: 24px;
  height: 24px;
  margin: auto;
  background-color: currentColor;
  -webkit-mask: var(--lg-control-icon) center / contain no-repeat;
  mask: var(--lg-control-icon) center / contain no-repeat;
}

.lg-actions .lg-next::before,
.lg-actions .lg-prev::after {
  width: 22px;
  height: 22px;
}

.lg-close {
  --lg-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.lg-download {
  --lg-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m-5-5l5 5 5-5M5 20h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lg-fullscreen {
  --lg-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lg-fullscreen-on .lg-fullscreen {
  --lg-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4v5H4M20 9h-5V4M15 20v-5h5M4 15h5v5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#lg-zoom-in {
  --lg-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M15.5 15.5L21 21M10.5 7v7M7 10.5h7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

#lg-zoom-out {
  --lg-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M15.5 15.5L21 21M7 10.5h7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

#lg-actual-size {
  --lg-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5M9 12h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lg-autoplay-button {
  --lg-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5l11 7-11 7z'/%3E%3C/svg%3E");
}

.lg-show-autoplay .lg-autoplay-button {
  --lg-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h4v14H7zM14 5h4v14h-4z'/%3E%3C/svg%3E");
}

.lg-actions .lg-next {
  --lg-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4l8 8-8 8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lg-actions .lg-prev {
  --lg-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 4l-8 8 8 8' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lg-outer .lg-toogle-thumb {
  --lg-control-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z'/%3E%3C/svg%3E");
}

/* Older browsers without mask support still get clear text controls. */
@supports not ((mask: url("") center / contain no-repeat) or (-webkit-mask: url("") center / contain no-repeat)) {
  .lg-toolbar .lg-icon::after,
  .lg-actions .lg-next::before,
  .lg-actions .lg-prev::after,
  .lg-outer .lg-toogle-thumb::after {
    width: auto;
    height: auto;
    background: none;
    -webkit-mask: none;
    mask: none;
    font: 24px/24px Arial, Helvetica, sans-serif;
  }

  .lg-close::after { content: "\00d7" !important; }
  #lg-zoom-in::after { content: "+" !important; }
  #lg-zoom-out::after { content: "\2212" !important; }
  .lg-actions .lg-next::before { content: "\203a" !important; }
  .lg-actions .lg-prev::after { content: "\2039" !important; }
  .lg-autoplay-button::after { content: "\25b6" !important; }
  .lg-show-autoplay .lg-autoplay-button::after { content: "\2016" !important; }
  .lg-fullscreen::after { content: "[ ]" !important; font-size: 16px; }
  .lg-outer .lg-toogle-thumb::after { content: "\25a6" !important; }
}