/*
 * A big picture and the strip that swaps it. The two layouts are one flex box:
 * `bottom` stacks them, `right` puts them side by side at a fraction the caller
 * names — which is why that fraction, the aspect ratio and the width cap are the
 * component's three data properties.
 *
 * Percentages of the container rather than a measured width, so the browser
 * resolves them: no measuring pass, and no blank first frame while one runs.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-image-gallery {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: var(--lotics-image-gallery-max, none);
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  .lotics-image-gallery[data-side="right"] {
    flex-direction: row;
    gap: var(--lotics-space-12);
  }

  /* Nothing to show yet: the spinner and the empty line keep their own size
     rather than being stretched across the frame. */
  .lotics-image-gallery[data-state] {
    align-items: flex-start;
  }

  .lotics-image-gallery__main {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }

  .lotics-image-gallery[data-side="right"] .lotics-image-gallery__main {
    flex: 0 0
      calc((100% - var(--lotics-space-12)) * var(--lotics-image-gallery-main));
  }

  .lotics-image-gallery[data-side="right"] .lotics-image-gallery__thumbnails {
    flex: 0 0
      calc((100% - var(--lotics-space-12)) * (1 - var(--lotics-image-gallery-main)));
  }

  /* The zoom door. `cursor: auto` because the picture is the content, not a
     control — pressing it opens the lightbox, but it does not advertise itself
     as a button the way a toolbar glyph does. */
  .lotics-image-gallery__zoom {
    display: block;
    width: 100%;
    aspect-ratio: var(--lotics-image-gallery-ratio);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    background-color: var(--muted);
    overflow: hidden;
    appearance: none;
    cursor: auto;
  }

  .lotics-image-gallery__zoom:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  /* The turn controls sit OUTSIDE the zoom door — an absolute sibling on top —
     so pressing them turns the picture instead of opening the lightbox. */
  .lotics-image-gallery__rotate {
    position: absolute;
    top: var(--lotics-space-8);
    right: var(--lotics-space-8);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-6);
  }

  .lotics-image-gallery__turn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* The control's own disc — a glyph over a photograph, on no rung. */
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0 solid var(--border);
    border-radius: var(--lotics-radius-full);
    background-color: color-mix(in srgb, var(--lotics-shadow-color) 45%, transparent);
    appearance: none;
    cursor: default;
    --lotics-icon-color: var(--lotics-white);
  }

  .lotics-image-gallery__turn:focus-visible {
    outline: var(--lotics-ring-width) solid var(--ring);
    outline-offset: 0;
  }

  .lotics-image-gallery__thumbnails {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    min-width: 0;
    gap: var(--lotics-space-6);
  }

  /* The ring is CONCENTRIC with the tile inside it: the tile's own 8px corner
     plus the 2px border. */
  .lotics-image-gallery__thumbnail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    border: 2px solid var(--border);
    border-radius: var(--lotics-radius-control);
  }

  .lotics-image-gallery__thumbnail[data-active] {
    border-color: var(--foreground);
  }
}