/*
 * A QUARTER TURN HAS TO REFIT, or a rotated landscape photo shrinks into the
 * middle of its own frame. The box is laid out in the container's SWAPPED
 * dimensions and then rotated into place. `container-type: size` plus the `cq`
 * units states that in CSS: `100cqh` IS the container's height, read by the
 * browser rather than by a layout pass we run ourselves, so there is no frame
 * where the image is laid out at the wrong size.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-rotatable-image {
    container-type: size;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--lotics-rotatable-image-ground, transparent);
  }

  .lotics-rotatable-image__image {
    display: block;
    width: 100%;
    height: 100%;
    /* Aspect ratio preserved — a document scan letterboxes rather than crops. */
    object-fit: contain;
    transform: rotate(var(--lotics-rotatable-image-turn, 0deg));
  }

  .lotics-rotatable-image[data-quarter] .lotics-rotatable-image__image {
    width: 100cqh;
    height: 100cqw;
  }
}