/*
  Shared arrow chrome for galleries, lightboxes, linked locations, race nav,
  and lore modals.

  This file is intentionally loaded as the final arrow normalization layer.
  It overrides component-specific arrow defaults so the mixed legacy arrow
  controls keep one visual contract. Do not fold it into component CSS or
  remove the forceful overrides without verifying every arrow context.
*/

.sftl-arrow {
  --sftl-arrow-glyph-size: 16px;
  --sftl-arrow-glyph-stroke: 4px;
  --sftl-arrow-prev-shift: -43%;
  --sftl-arrow-next-shift: -57%;
  --sftl-arrow-surface: rgba(6, 7, 16, 0.42);
  --sftl-arrow-surface-hover: rgba(12, 14, 28, 0.58);
  --sftl-arrow-border: rgba(238, 229, 211, 0.16);
  --sftl-arrow-border-hover: rgba(238, 229, 211, 0.34);
  --sftl-arrow-color: rgba(245, 236, 214, 0.82);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  cursor: pointer;
}

.gallery-carousel__strip-hotspot,
.lightbox__strip-hotspot,
.race-nav {
  --sftl-arrow-glyph-size: 13px;
  --sftl-arrow-glyph-stroke: 3px;
}

.gallery-carousel__arrow,
.lightbox__nav,
.linked-location__nav,
.race-nav {
  border: 1px solid var(--sftl-arrow-border);
}

.gallery-carousel__arrow,
.lightbox__nav,
.linked-location__nav,
.race-nav,
.lore-modal__arrow {
  border-radius: 50%;
}

.lightbox__nav,
.linked-location__nav,
.race-nav {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.linked-location__nav,
.race-nav,
.lore-modal__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.gallery-carousel__arrow,
.lore-modal__arrow,
.lightbox__nav,
.lightbox__strip-hotspot,
.linked-location__nav,
.race-nav {
  --sftl-arrow-surface: rgba(6, 7, 16, 0.28);
  --sftl-arrow-surface-hover: rgba(12, 14, 28, 0.44);
  --sftl-arrow-border: rgba(238, 229, 211, 0.12);
  --sftl-arrow-border-hover: rgba(238, 229, 211, 0.28);
  background: var(--sftl-arrow-surface) !important;
  border-color: var(--sftl-arrow-border) !important;
}

.gallery-carousel__arrow:hover,
.lore-modal__arrow:hover,
.lightbox__nav:hover,
.lightbox__strip-hotspot:hover,
.linked-location__nav:is(:hover, :focus-visible),
.race-nav:hover {
  background: var(--sftl-arrow-surface-hover) !important;
  border-color: var(--sftl-arrow-border-hover) !important;
}

.gallery-carousel__strip .gallery-carousel__strip-hotspot,
.lightbox__strip .lightbox__strip-hotspot {
  position: relative !important;
  inset: auto !important;
}

.sftl-arrow > span,
.sftl-arrow > svg {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.sftl-arrow::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: var(--sftl-arrow-glyph-size) !important;
  height: var(--sftl-arrow-glyph-size) !important;
  border-top: var(--sftl-arrow-glyph-stroke) solid currentColor !important;
  border-right: var(--sftl-arrow-glyph-stroke) solid currentColor !important;
  border-radius: 2px !important;
  transform-origin: center center !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

.sftl-arrow--next::before {
  transform: translate(var(--sftl-arrow-next-shift), -50%) rotate(45deg) !important;
}

.sftl-arrow--prev::before {
  transform: translate(var(--sftl-arrow-prev-shift), -50%) rotate(-135deg) !important;
}