/* ONE FILE SHOWN WHOLE. A picture or a clip takes the column's width up to the media height, at its own
   ratio (`media_view.tsx` reads it off the loaded file), flush left under its label: a portrait clip stands
   upright at the height and narrows, never letterboxed across the column. The overlays ride the frame's
   own corner. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-media-view {
    /* A picture read in a record's body: a landscape clip across a reading column, a portrait one upright
       without taking the screen. */
    --lotics-media-view-height: 480px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }

  .lotics-media-view__frame {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
  }

  .lotics-media-view__frame[data-shown="image"],
  .lotics-media-view__frame[data-shown="video"] {
    width: min(100%, calc(var(--lotics-media-view-height) * var(--lotics-media-view-ratio)));
    aspect-ratio: var(--lotics-media-view-ratio);
    overflow: hidden;
    border-radius: var(--lotics-radius-control);
    background: var(--muted);
  }

  /* A recording's player takes the column; its height is the platform's. */
  .lotics-media-view__frame[data-shown="audio"] {
    width: 100%;
  }

  .lotics-media-view__picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* The file's ⋯, over the frame's corner. */
  .lotics-media-view__acts {
    position: absolute;
    top: var(--lotics-space-8);
    right: var(--lotics-space-8);
  }

  /* The file shown stays under the spinner until its replacement lands. */
  .lotics-media-view__uploading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--lotics-black) 40%, transparent);
  }
}