/* A quarter turn lays the box out in the container's swapped dimensions, then rotates, so a landscape
   photo refits. `container-type: size` with `cq` units lets the browser read the height, so no frame is
   laid out wrong. */
@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%;
    /* A 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;
  }
}