/*
   default-modal.css

   Copyleft 🄯 2022 Taiji Yamada <taiji@aihara.co.jp>

   usage:

<div>
<label class="modal_sibling" for="modal_id">✓ モーダルウインドウを表示</label>
<input type="checkbox" style="display: none;" id="modal_id"/>
<div><div style="align-items: center; justify-content: center;">
<label for="modal_id" style="font-size: small;">✕ 閉じる / Close</label>

モーダルウインドウ

</div></div></div>
*/
label.modal_sibling {
  cursor: pointer;
}
label.modal_sibling + input[type='checkbox'] + div {
  display: none;
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh; z-index: 32767;
}
label.modal_sibling + input[type='checkbox']:checked + div {
  display: block;
}
label.modal_sibling + input[type='checkbox']:checked + div > div:first-child {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: var(--width, 90vw); height: var(--height, 90vh);
  background-color: var(--background-color, Canvas);
  padding: .5em; border-radius: 8px;
}
label.modal_sibling + input[type='checkbox'] + div > div:first-child > label:first-child {
  position: absolute; top: 4px; right: 4px;
  cursor: pointer;
}