@layer components {
  /*
    画像の切り抜き。手本に同じ部品は無い（推測）。BC2・Highriseに写真の切り抜きの画面は見つからず、近いのはClassicの
    写真のアップロード（screenshots/37signals-others/classic-my-info-photo-upload-2010.png。1倍。枠の無い#f0f0f0の箱に
    標準のファイル選択、その下に枠の無い48pxの写真）だけだった。そこで既にある語彙から組む。
    画像を置く台はBC2の背後に重ねた親のシートの面、題名はまとまりの見出し、ハンドルは控えめなボタンの白と下の1pxの影。
  */
  .rx-image-cropper {
    --rx-cropper-aspect: 1;
    --image-cropper-x: 25;
    --image-cropper-y: 25;
    --image-cropper-width: 50;
    --image-cropper-height: 50;
    --image-cropper-zoom: 1;
    --image-cropper-offset-x: 0;
    --image-cropper-offset-y: 0;
    container: rx-image-cropper / inline-size;
    display: grid;
    gap: var(--rx-space-3);
    min-inline-size: 0;
    color: var(--rx-text);

    /* 題名はSectionの見出しと同じ、赤茶の通常の太さの文字。 */
    & > .title {
      color: var(--rx-heading);
      font-size: var(--rx-section-title);
      font-weight: 400;
      line-height: var(--rx-label-leading);
    }

    & > .layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem);
      align-items: start;
      gap: var(--rx-space-5);
      min-inline-size: 0;
    }

    /* 画像を置く台は、BC2の背後に重ねた親のシートと同じ面（#f9f9f9、1px #e5e5e5、影なし。structure.md）。 */
    & > .layout > .stage {
      display: grid;
      place-items: center;
      min-inline-size: 0;
      padding-block: var(--rx-space-4);
      padding-inline: var(--rx-space-5);
      border: var(--rx-stroke-width) solid var(--rx-sheet-behind-edge);
      border-radius: var(--rx-radius-surface);
      background: var(--rx-sheet-behind);
    }

    & > .layout > .stage > .viewport {
      position: relative;
      inline-size: min(100%, 21rem);
      aspect-ratio: var(--rx-cropper-aspect);
      overflow: hidden;
      border: var(--rx-stroke-width) solid var(--rx-control-border);
      border-radius: var(--rx-radius-mark);
      background: var(--rx-surface);
      box-shadow: none;
      isolation: isolate;
    }

    & > .layout > .stage > .viewport > img {
      position: absolute;
      inset-block-start: calc(var(--image-cropper-offset-y) * 1%);
      inset-inline-start: calc(var(--image-cropper-offset-x) * 1%);
      inline-size: calc(var(--image-cropper-zoom) * 100%);
      block-size: calc(var(--image-cropper-zoom) * 100%);
      max-inline-size: none;
      object-fit: fill;
      pointer-events: none;
      user-select: none;
    }

    & > .layout > .stage > .viewport > .selection {
      position: absolute;
      inset-block-start: calc(var(--image-cropper-y) * 1%);
      inset-inline-start: calc(var(--image-cropper-x) * 1%);
      inline-size: calc(var(--image-cropper-width) * 1%);
      block-size: calc(var(--image-cropper-height) * 1%);
      min-block-size: 0;
      padding: 0;
      border: 0.125rem solid var(--rx-surface);
      border-radius: 0;
      background: transparent;
      /* 選んだ範囲の外は、暖かい黒の半透明で覆って暗くする。 */
      box-shadow:
        0 0 0 100vmax color-mix(in srgb, var(--rx-ink) 45%, transparent),
        inset 0 0 0 var(--rx-stroke-width) color-mix(in srgb, var(--rx-ink) 40%, transparent),
        0 0 0 var(--rx-stroke-width) color-mix(in srgb, var(--rx-ink) 40%, transparent);
      cursor: move;
      touch-action: none;
    }

    & > .layout > .stage > .viewport > .resize {
      position: absolute;
      inset-block-start: clamp(
        0rem,
        calc((var(--image-cropper-y) + var(--image-cropper-height)) * 1% - 1.125rem),
        calc(100% - 2.25rem)
      );
      inset-inline-start: clamp(
        0rem,
        calc((var(--image-cropper-x) + var(--image-cropper-width)) * 1% - 1.125rem),
        calc(100% - 2.25rem)
      );
      inline-size: 2.25rem;
      block-size: 2.25rem;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      /* 押せる範囲の丸は見せず、中の小さな四角だけを描く。Buttonの下の影を外す。 */
      box-shadow: none;
      cursor: nwse-resize;
      touch-action: none;
    }

    & > .layout > .stage > .viewport > .resize::after {
      content: "";
      display: block;
      inline-size: 0.875rem;
      block-size: 0.875rem;
      border: 0.125rem solid var(--rx-link);
      border-radius: var(--rx-radius-mark);
      background: var(--rx-surface);
      /* 控えめなButtonと同じ、下に1pxの平らな影（ぼかしなし）。 */
      box-shadow: var(--rx-shadow-control);
    }

    & > .layout > .stage > .viewport > :is(.selection, .resize):focus-visible {
      outline: 0.125rem solid var(--rx-link);
      outline-offset: 0.125rem;
    }

    &[data-state="moving"] > .layout > .stage > .viewport > .selection,
    &[data-state="resizing"] > .layout > .stage > .viewport > .resize {
      cursor: grabbing;
    }

    &[data-disabled="true"] > .layout > .stage > .viewport > :is(.selection, .resize) {
      cursor: not-allowed;
    }

    & > .layout > .settings {
      display: grid;
      align-content: start;
      gap: var(--rx-space-4);
      min-inline-size: 0;
    }

    /* 開閉の見た目はDisclosureが持つ。 */
    /* 罫線の内側に余白を持たせ、見出しから調整の欄までの間より広くする。 */
    & > .layout > .settings > .position {
      padding-block: var(--rx-space-3);
      border-block: var(--rx-stroke-width) solid var(--rx-border);
    }

    & > .layout > .settings > .position > .body > .ranges {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--rx-space-3) var(--rx-space-4);
    }

    /* JavaScriptが無いと動かないので、controllerが接続するまでハンドルと調整の欄を出さず、切り抜きの見本だけにする。 */
    &:not([data-connected="true"]) > .layout > .settings,
    &:not([data-connected="true"]) > .layout > .stage > .viewport > :is(.selection, .resize) {
      display: none;
    }

    & > .layout > .settings > .instructions {
      color: var(--rx-muted);
      font-size: var(--rx-small);
      line-height: var(--rx-small-leading);
    }

    & > .empty {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--rx-space-4);
      min-inline-size: 0;
      padding-block: var(--rx-space-4) var(--rx-space-3);
      padding-inline: var(--rx-space-5);
      border: var(--rx-stroke-width) solid var(--rx-sheet-behind-edge);
      border-radius: var(--rx-radius-surface);
      background: var(--rx-sheet-behind);
      color: var(--rx-muted);
      font-size: var(--rx-label);
    }

    & > .empty > .rx-image-frame {
      flex: 0 1 4rem;
      max-inline-size: 100%;
    }

    & > .empty > p {
      flex: 1 1 6rem;
      min-inline-size: 0;
      overflow-wrap: anywhere;
    }
  }

  @container rx-image-cropper (inline-size < 40rem) {
    .rx-image-cropper > .layout {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--rx-space-4);
    }

    .rx-image-cropper > .layout > .settings {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .rx-image-cropper > .layout > .settings > .instructions {
      grid-column: 1 / -1;
    }
  }

  @container rx-image-cropper (inline-size < 25rem) {
    .rx-image-cropper > .layout > .settings,
    .rx-image-cropper > .layout > .settings > .position > .body > .ranges {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (forced-colors: active) {
    .rx-image-cropper > .layout > .stage > .viewport > .selection {
      border-color: Highlight;
      box-shadow: 0 0 0 100vmax Canvas;
    }
    .rx-image-cropper > .layout > .stage > .viewport > .resize::after {
      border-color: Highlight;
      background: Canvas;
      box-shadow: none;
    }
  }
}