/* The platform's transport; this sheet decides the box. A `<video>` reports its intrinsic size once
   metadata loads and grows content-sized ancestors (a 720p capture widened a 342px column to 367px), so
   the media is taken out of flow here, where the root is its positioning context. Audio stays in flow, its
   control height being what the caller wants. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-media-player[data-kind="video"] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /* Flex, since a block root gives the inline `<audio>` a line box and 4px of half-leading. */
  .lotics-media-player[data-kind="audio"] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* A failed audio player has no frame, so the root takes the notice's place in flow. */
  .lotics-media-player[data-kind="audio"][data-failed] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    min-height: 0;
  }

  .lotics-media-player[data-kind="video"] .lotics-media-player__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    /* A screen capture is evidence, and cropping hides part of it. */
    object-fit: contain;
    background-color: var(--lotics-black);
  }

  /* The box is itself a crop (a feed card), so a letterboxed still would misrepresent the post;
     `object-fit` governs the poster too. */
  .lotics-media-player[data-kind="video"][data-fit="cover"] .lotics-media-player__media {
    object-fit: cover;
  }

  .lotics-media-player[data-kind="audio"] .lotics-media-player__media {
    width: 100%;
  }

  .lotics-media-player__notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    gap: var(--lotics-space-8);
    padding: var(--lotics-space-16);
    border-radius: calc(var(--lotics-radius-control) - var(--lotics-space-2));
    background-color: var(--muted);
    --lotics-icon-color: var(--lotics-ink-inactive);
  }
}