:host {
  --viewport-background-color: var(--wa-color-surface-default, canvas);
  --viewport-resize: both;
  --viewport-min-width: 10em;
  --viewport-min-height: 5em;
  --viewport-max-width: 100%;
  --viewport-padding: var(--wa-space-2xl, 2rem);
  --viewport-initial-aspect-ratio: 16 / 9;
  --viewport-bezel-width: 0.25em;

  display: block;
  /* Needed for measuring the available space */
  contain: inline-size;
  container-type: inline-size;
  container-name: host;
}

[part~='frame'] {
  --zoom: 1; /* overridden by JS */
  --available-width: calc((100cqw - var(--offset-inline, 0px)));
  --iframe-manual-aspect-ratio: calc(var(--iframe-manual-width-px) / var(--iframe-manual-height-px));
  --iframe-manual-width: calc(var(--iframe-manual-width-px) * 1px * var(--zoom));
  --iframe-manual-height: calc(var(--iframe-manual-height-px) * 1px * var(--zoom));
  --width: var(--iframe-manual-width, var(--available-width));
  --height-auto: calc(var(--width) / (var(--aspect-ratio)));

  --_aspect-ratio: calc(var(--viewport-width-px) / var(--viewport-height-px));
  --aspect-ratio: var(--_aspect-ratio, var(--viewport-initial-aspect-ratio));

  display: flex;
  flex-flow: column;
  align-items: start;

  width: fit-content;
  height: fit-content;

  /* Style frame like a window */
  border: var(--viewport-bezel-width) solid transparent;
  border-radius: calc(var(--wa-border-radius-m));

  /* Window-like frame styling */
  --button-params: 0.4em / 0.5em 0.5em border-box;
  background:
    radial-gradient(circle closest-side, var(--wa-color-red-60) 80%, var(--wa-color-red-50) 98%, transparent) 0.4em
      var(--button-params),
    radial-gradient(circle closest-side, var(--wa-color-yellow-80) 80%, var(--wa-color-yellow-70) 98%, transparent)
      1.1em var(--button-params),
    radial-gradient(circle closest-side, var(--wa-color-green-70) 80%, var(--wa-color-green-60) 98%, transparent) 1.8em
      var(--button-params),
    var(--wa-color-gray-95);
  background-repeat: no-repeat;
  box-shadow:
    0 0 0 1px var(--wa-color-gray-90),
    var(--wa-shadow-m);

  &.resized {
    aspect-ratio: var(--iframe-manual-aspect-ratio);
  }

  /* User has not yet resized the viewport */
  &:not(.resized) ::slotted(iframe),
  &:not(.resized) slot {
    /* Will only be set if we have BOTH width and height */
    aspect-ratio: var(--aspect-ratio);
  }
}

slot {
  display: block;
  overflow: clip;
  width: var(--width);
  max-width: var(--available-width);
  height: var(--iframe-manual-height, var(--height-auto));
}

::slotted(iframe) {
  display: block;
  flex: auto;
  scale: var(--zoom);
  transform-origin: top left;
  resize: var(--viewport-resize);
  overflow: auto;

  /* The width and height specified here are only applied if the iframe is not manually resized */
  width: calc(var(--available-width) / var(--zoom));
  height: calc(var(--height-auto) / var(--zoom));

  min-width: calc(var(--viewport-min-width, 10em) / var(--zoom));
  max-width: calc(var(--available-width) / var(--zoom)) !important;
  min-height: calc(var(--viewport-min-height) / var(--zoom));

  /* Divide with var(--zoom) to get lengths that stay constant regardless of zoom level */
  border: calc(1px / var(--zoom)) solid var(--wa-color-gray-90);
  background: var(--viewport-background-color);
}

[part~='controls'] {
  display: flex;
  align-items: center;
  align-self: end;
  gap: 0.3em;
  margin-top: -0.2em;
  font-size: var(--wa-font-size-xs);
  padding-block-end: 0.25em;
  padding-inline: 1em 0.2em;
  white-space: nowrap;

  /* Until we can implement info that is not lying, we don’t show it when it's lying */
  .needs-internal-zoom & > * {
    opacity: 0 !important;
    pointer-events: none;
  }

  .dimensions {
    word-spacing: -0.15em;
    margin-inline-end: 1em;
  }

  wa-icon {
    display: none;
    vertical-align: -0.1em;
    font-size: 85%;
    color: var(--wa-color-gray-70);
  }

  wa-icon-button {
    &:not(:hover, :focus) {
      opacity: 0.5;
    }

    &::part(base) {
      padding: 0;
    }
  }

  .zoom {
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-weight: 600;
    color: var(--wa-color-text-quiet);
    opacity: 80%;
  }

  [part~='zoom-in'],
  [part~='zoom-in']::part(base) {
    cursor: zoom-in;
  }

  [part~='zoom-out'],
  [part~='zoom-out']::part(base) {
    cursor: zoom-out;
  }
}
