@charset "utf-8";

@layer base, component;
/*
 * LvLightbox (クラスベース)
 * .lv-wrapper     : オーバーレイ全体
 * .lv-content     : 画像・操作ボタン・キャプションを囲うコンテンツ
 * .lv-image       : 画像
 * .lv-bottom      : キャプション + 閉じるボタン
 * .lv-prev/next   : ナビゲーション矢印
 * .lv-close       : 閉じるボタン
 */

@layer component {
  @keyframes lv-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @scope (.lv-wrapper) {
    :scope {
      position: fixed;
      inset: 0; /* top,right,bottom,left = 0 */
      width: 100dvw;
      height: 100dvh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(255, 255, 255, 1);
      z-index: 99999;

      /* fade-in */
      opacity: 0;
      animation: lv-fade-in 0.5s ease-out forwards;
    }

    .lv-content {
      width: fit-content;
      max-width: 80svw;
      max-height: calc(100% - 50px * 2);
      display: grid;
      grid-template-columns: auto min-content auto;
      grid-template-rows: auto auto;
      grid-template-areas:
        "left image right"
        ". bottom .";
      column-gap: clamp(10px, 4vw, 50px);
      row-gap: clamp(10px, 4vw, 20px);
      min-width: 0;
    }

    /* navigation buttons */
    .lv-prev,
    .lv-next {
      width: 5vw;
      max-width: 40px;
      aspect-ratio: 0.5;
      background-size: contain;
      background-position: center;
      cursor: pointer;
      user-select: none;
      align-self: center;
    }

    .lv-prev {
      grid-area: left;
      background-image: url("/assets/wp-assets/images/button_prev.gif");
    }

    .lv-prev:hover {
      background-image: url("/assets/wp-assets/images/button_prev_over.gif");
    }

    .lv-next {
      grid-area: right;
      background-image: url("/assets/wp-assets/images/button_next.gif");
    }

    .lv-next:hover {
      background-image: url("/assets/wp-assets/images/button_next_over.gif");
    }

    .lv-image {
      grid-area: image;
      width: 100%;
    }

    .lv-bottom {
      grid-area: bottom;
      display: flex;
      justify-content: space-between;
      gap: 5%;
    }

    .lv-info {
      width: fit-content;
      color: var(--color-gray);
      font-size: 9px;
      line-height: var(--line-height-caption);
    }

    .lv-info p {
      line-height: var(--line-height-caption);
      text-align: unset;
    }

    .lv-info p + p {
      margin-top: 20px;
    }

    .lv-close {
      width: 19px;
      height: 19px;
      background: url("/assets/wp-assets/images/button_close.gif") no-repeat
        center/contain;
      flex-shrink: 0;
      cursor: pointer;
      user-select: none;
    }

    .lv-close:hover {
      background-image: url("/assets/wp-assets/images/button_close_over.gif");
    }
  }
}