@layer components {
  [data-gallery] a[aria-haspopup='dialog'] {
    position: relative;
    display: inline-block;
    max-inline-size: 100%;
    line-height: 0;
    vertical-align: middle;
    cursor: zoom-in;

    &::before,
    &::after {
      content: '';
      position: absolute;
      inset-block-start: 50%;
      inset-inline-start: 50%;
      inline-size: 90px;
      aspect-ratio: 1;
      border-radius: 50%;
      corner-shape: round;
      opacity: 0;
      translate: -50% -50%;
      scale: 0.8;
      pointer-events: none;
      transition:
        opacity var(--transition-state),
        scale var(--transition-state);
    }

    &::before {
      background: color-mix(in oklch, var(--green-400) 92%, transparent);
      box-shadow: var(--elevation-2);
    }

    &::after {
      background: var(--green-900);
      mask: var(--icon-zoom) center / 100% no-repeat;
    }

    &:is(:hover, :focus-visible) {
      &::before,
      &::after {
        opacity: 1;
        scale: 1;
      }
    }

    &:active {
      &::before,
      &::after {
        scale: 0.92;
      }
    }

    .instagram &::before,
    .instagram &::after {
      inset-block-start: calc(50% - 6px);
    }
  }

  .post a[aria-haspopup='dialog']:has(> img[width='500']) {
    inline-size: 500px;

    @media (650px < width <= 950px) {
      inline-size: 275px;
    }

    @media (650px < width <= 905px) {
      inline-size: 250px;
    }

    @media (650px < width <= 790px) {
      inline-size: 210px;
    }
  }

  .post a[aria-haspopup='dialog'] > img[width='500'] {
    inline-size: 100%;
    block-size: auto;
  }

  html:has(.gallery) {
    scrollbar-gutter: stable;
  }

  html:has(.gallery[open]) {
    overflow: hidden;
  }

  .gallery {
    --focus-color: var(--color-cyan-light);
    inline-size: 100%;
    max-inline-size: none;
    block-size: 100dvh;
    max-block-size: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: transparent;
    color: var(--color-paper);

    &::backdrop {
      background: color-mix(in oklch, var(--color-ink) 92%, transparent);
    }

    @media (prefers-reduced-motion: no-preference) {
      &[open],
      &[open]::backdrop {
        animation: gallery-appear var(--transition-state);
      }
    }

    & button {
      position: absolute;
      display: grid;
      place-items: center;
      padding: 0;
      border: 0;
      color: var(--color-paper);
      font: 32px / 1 var(--font-text);
      cursor: pointer;
      transition:
        opacity var(--transition-state),
        background-color var(--transition-state);

      &:focus-visible {
        outline-offset: -4px;
      }

      &:disabled {
        opacity: 0;
        cursor: default;
      }
    }

    @media (max-width: 600px), (pointer: coarse) {
      & :is(.gallery-prev, .gallery-next) {
        display: none;
      }
    }
  }

  .gallery-close,
  :is(.gallery-prev, .gallery-next)::before {
    inline-size: 48px;
    block-size: 48px;
    border-radius: 50%;
    corner-shape: round;
    background-color: color-mix(in oklch, var(--color-paper) 12%, transparent);
    transition: background-color var(--transition-state);
  }

  .gallery-close:hover,
  :is(.gallery-prev, .gallery-next):hover:enabled::before {
    background-color: color-mix(in oklch, var(--color-paper) 24%, transparent);
  }

  .gallery-close:active,
  :is(.gallery-prev, .gallery-next):active:enabled::before {
    background-color: color-mix(in oklch, var(--color-paper) 32%, transparent);
  }

  .gallery-prev,
  .gallery-next {
    isolation: isolate;
    inset-block: 0;
    inline-size: clamp(64px, 12%, 160px);
    background: transparent;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      margin: auto;
    }
  }

  .gallery-prev {
    inset-inline-start: 0;
  }

  .gallery-next {
    inset-inline-end: 0;
  }

  .gallery-close {
    z-index: 1;
    inset-block-start: var(--space-12);
    inset-inline-end: var(--space-12);
  }

  .gallery-counter {
    position: absolute;
    inset-block-start: var(--space-24);
    inset-inline-start: var(--space-20);
    margin: 0;
    color: var(--color-on-dark-muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  .gallery-slides {
    display: flex;
    block-size: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    list-style: none;

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  .gallery-slide {
    flex: 0 0 100%;
    display: grid;
    min-inline-size: 0;
    padding: var(--space-64) var(--space-64) var(--space-32);
    scroll-snap-align: center;
    scroll-snap-stop: always;

    @media (max-width: 600px) {
      padding-inline: var(--space-12);
    }

    & figure {
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      place-items: center;
      gap: var(--space-12);
      min-inline-size: 0;
      min-block-size: 0;
      margin: 0;
    }

    & picture {
      grid-area: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      inline-size: 100%;
      block-size: 100%;
      min-inline-size: 0;
      min-block-size: 0;
    }

    & source {
      display: none;
    }

    & img {
      max-inline-size: 100%;
      max-block-size: 100%;
      border-radius: var(--radius-s);
      object-fit: contain;
      opacity: 0;

      @media (prefers-reduced-motion: no-preference) {
        transition: opacity var(--transition-state);
      }
    }

    &[data-state='ready'] img {
      opacity: 1;
    }

    &[data-state='ready'] .gallery-status {
      display: none;
    }

    &[data-state='error'] picture {
      visibility: hidden;
    }

    & figcaption {
      grid-area: 2 / 1;
      display: -webkit-box;
      max-inline-size: 60ch;
      overflow: hidden;
      font-size: var(--text-small);
      line-height: var(--leading-small);
      text-align: center;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
  }

  .gallery-status {
    grid-area: 1 / 1;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: var(--space-12);
    margin: 0;
    font-size: var(--text-small);
    line-height: var(--leading-small);
    text-align: center;

    & a {
      color: inherit;
    }

    .gallery-slide[data-state='loading']:not([inert]) & {
      animation: gallery-appear 0s 150ms both;

      &::before {
        content: '';
        inline-size: 28px;
        aspect-ratio: 1;
        border: 2px solid currentColor;
        border-inline-end-color: transparent;
        border-radius: 50%;
        corner-shape: round;

        @media (prefers-reduced-motion: no-preference) {
          animation: gallery-spin 800ms linear infinite;
        }
      }
    }
  }

  .gallery-original {
    position: absolute;
    inset-block-end: var(--space-8);
    inset-inline-start: 50%;
    color: var(--color-paper);
    translate: -50% 0;

    &:not(:focus-visible) {
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @keyframes gallery-appear {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes gallery-spin {
    to {
      rotate: 1turn;
    }
  }
}