/**
 * @file media_frame.css
 * @component Media Frame (Content)
 * @description Constrains opaque media and offers a native transcript disclosure.
 *
 * @section Public custom properties
 * None.
 *
 * @section Private custom properties
 * None.
 */
:where([data-component-id="marsal_sdc:media_frame"]) {
  min-inline-size: 0;

  & > .marsal-media-frame__viewport {
    position: relative;
    min-inline-size: 0;
    overflow: hidden;
    background: var(--marsal-color-surfaceSubtle);

    & > .marsal-media-frame__media,
    & > .marsal-media-frame__poster {
      min-inline-size: 0;
    }
  }

  &[data-aspect="square"] > .marsal-media-frame__viewport {
    aspect-ratio: 1;
  }

  &[data-aspect="portrait"] > .marsal-media-frame__viewport {
    aspect-ratio: 3 / 4;
  }

  &[data-aspect="tall"] > .marsal-media-frame__viewport {
    aspect-ratio: 1 / 2;
  }

  &[data-aspect="landscape"] > .marsal-media-frame__viewport {
    aspect-ratio: 4 / 3;
  }

  &[data-aspect="widescreen"] > .marsal-media-frame__viewport {
    aspect-ratio: 16 / 9;
  }

  &[data-aspect="ultrawide"] > .marsal-media-frame__viewport {
    aspect-ratio: 21 / 9;
  }

  &:not([data-aspect="auto"]) > .marsal-media-frame__viewport {
    & > .marsal-media-frame__media,
    & > .marsal-media-frame__media :where(img, picture, video, iframe, :has(img, video, iframe)) {
      inline-size: 100%;
      block-size: 100%;
    }

    /* A definite media box lets percentage heights reach through Drupal wrappers.
     * Only the media path fills the viewport; captions and controls are not wrappers.
     */
    &:where(:has(> .marsal-media-frame__media :is(img, video, iframe))) > :where(.marsal-media-frame__media, .marsal-media-frame__poster) {
      position: absolute;
      inset: 0;
    }

    & > .marsal-media-frame__media :where(img, picture, video, iframe, :has(img, video, iframe)) {
      display: block;
      box-sizing: border-box;
      min-inline-size: 0;
      max-inline-size: 100%;
      min-block-size: 100%;
      max-block-size: 100%;
      margin: 0;
      padding: 0;
    }

    & > .marsal-media-frame__media :where(iframe) {
      border: 0;
    }
  }

  &[data-fit="contain"] > .marsal-media-frame__viewport > .marsal-media-frame__media :where(img, video, iframe) {
    object-fit: contain;
  }

  &[data-fit="cover"] > .marsal-media-frame__viewport > .marsal-media-frame__media :where(img, video, iframe) {
    object-fit: cover;
    object-position: var(--focus, 50% 0);
  }

  & > .marsal-media-frame__supporting {
    margin-block-start: var(--marsal-space-xs);
  }

  & > .marsal-media-frame__disclosure {
    min-inline-size: 0;
    margin-block-start: var(--marsal-space-xs);
    border-block: 1px solid var(--marsal-color-borderSubtle);

    & > .marsal-media-frame__summary {
      display: flex;
      align-items: center;
      gap: var(--marsal-space-3xs);
      box-sizing: border-box;
      min-block-size: max(44px, 2.75rem);
      padding-block: var(--marsal-space-3xs);
      padding-inline: var(--marsal-space-2xs);
      color: var(--marsal-color-link);
      font-family: var(--marsal-fontFamily-label-standard);
      font-size: var(--marsal-fontSize-label-standard);
      font-weight: var(--marsal-fontWeight-label-standard);
      line-height: var(--marsal-lineHeight-label-standard);
      letter-spacing: var(--marsal-letterSpacing-label-standard);
      overflow-wrap: anywhere;
      list-style: none;
      cursor: pointer;

      &::-webkit-details-marker {
        display: none;
      }

      & > .marsal-media-frame__summary-label {
        min-inline-size: 0;
        text-decoration-line: underline;
        text-decoration-thickness: 0.08em;
        text-underline-offset: 0.2em;
      }

      &:hover > .marsal-media-frame__summary-label {
        text-decoration-thickness: 0.14em;
      }

      &:focus-visible {
        outline: 3px solid var(--marsal-color-focusRing);
        outline-offset: 3px;
        box-shadow: 0 0 0 2px var(--marsal-color-focusRingContrast);
      }

      & > .marsal-media-frame__indicator {
        display: grid;
        flex: none;
        place-items: center;
        inline-size: 1.75rem;
        block-size: 1.75rem;
        margin-inline-start: auto;
        border: 1.5px solid var(--marsal-color-borderInteractive);
        border-radius: 50%;
      }

      & > .marsal-media-frame__indicator::before {
        content: "+";
      }
    }

    &[open] > .marsal-media-frame__summary > .marsal-media-frame__indicator {
      background: var(--marsal-color-surfaceInteractive);
      color: var(--marsal-color-textOnInteractive);

      &::before {
        content: "\2212";
      }
    }

    /* The transcript paints its own light panel, so it restores the thirteen neutral
       roles, as Card does; a Brand or Scrim band's light text never reaches it. */
    & > .marsal-media-frame__transcript {
      --marsal-color-textPrimary: var(--marsal-color-textPrimaryTheme);
      --marsal-color-textStrong: var(--marsal-color-textStrongTheme);
      --marsal-color-textMuted: var(--marsal-color-textMutedTheme);
      --marsal-color-textBrand: var(--marsal-color-textBrandTheme);
      --marsal-color-link: var(--marsal-color-linkTheme);
      --marsal-color-borderSubtle: var(--marsal-color-borderSubtleTheme);
      --marsal-color-borderDefault: var(--marsal-color-borderDefaultTheme);
      --marsal-color-borderControl: var(--marsal-color-borderControlTheme);
      --marsal-color-borderInteractive: var(--marsal-color-borderInteractiveTheme);
      --marsal-color-borderAccent: var(--marsal-color-borderAccentTheme);
      --marsal-color-dividerAccent: var(--marsal-color-dividerAccentTheme);
      --marsal-color-focusRing: var(--marsal-color-focusRingTheme);
      --marsal-color-focusRingContrast: var(--marsal-color-focusRingContrastTheme);

      min-inline-size: 0;
      margin-block-end: var(--marsal-space-s);
      padding-block: var(--marsal-space-s);
      padding-inline: var(--marsal-space-s);
      border-inline-start: var(--marsal-length-dividerAccent) solid var(--marsal-color-dividerAccent);
      background: var(--marsal-color-surfaceSubtle);
      color: var(--marsal-color-textPrimary);
      overflow-wrap: anywhere;
    }

    @media (forced-colors: active) {
      border-color: CanvasText;

      & > .marsal-media-frame__summary {
        color: LinkText;
      }

      & > .marsal-media-frame__summary:focus-visible {
        outline-color: Highlight;
        box-shadow: 0 0 0 2px Canvas;
      }

      & > .marsal-media-frame__summary > .marsal-media-frame__indicator {
        border-color: ButtonText;
        background: Canvas;
        color: ButtonText;
      }

      &[open] > .marsal-media-frame__summary > .marsal-media-frame__indicator {
        border-color: Highlight;
        background: Highlight;
        color: HighlightText;
      }

      & > .marsal-media-frame__transcript {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
      }
    }
  }
}

/* @todo WORKAROUND: blazy/css/components/blazy.ratio.css:13-22 `.media.media--ratio`
   makes its wrapper the containing block of Blazy's absolutely placed media
   (blazy.css:108-120), sized by an inline padding-bottom ratio; delete when
   Media Frame no longer receives Blazy ratio wrappers. */
[data-component-id="marsal_sdc:media_frame"]:not([data-aspect="auto"]) > .marsal-media-frame__viewport > .marsal-media-frame__media .media--ratio {
  position: static;
}