modal_01

// =====================================================================================
//
// modal_01
//
// =====================================================================================

@use 'scss/global' as g;

// -------------------------------------------------------------------------------------
// 変数
// -------------------------------------------------------------------------------------

// モーダル本体の最大幅
$max_width: 800px;

// オーバーレイ背景色
$bg_color: rgba(0, 0, 0, 0.53);

// 角丸半径
$border-radius: 4px;

// -------------------------------------------------------------------------------------
// 全画面枠
// -------------------------------------------------------------------------------------
.modal_01--container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  display: none;
  width: 100%;
  height: 100%;
  background-color: $bg_color;

  &.is_close {
    display: none;
  }

  &.is_open {
    display: flex;
  }
}

// -------------------------------------------------------------------------------------
// 全画面枠 > モーダル本体
// -------------------------------------------------------------------------------------
.modal_01 {
  position: relative;
  width: 100%;
  max-width: $max_width;
  margin: auto;
  background: #fff;
  border-radius: $border-radius;
}

// -------------------------------------------------------------------------------------
// 全画面枠 > モーダル本体 > 内枠
// -------------------------------------------------------------------------------------
.modal_01--frame {
  border-radius: $border-radius;
}

// -------------------------------------------------------------------------------------
// 全画面枠 > モーダル本体 > 内枠 > シーンコンテナ
// -------------------------------------------------------------------------------------
.modal_01--scenes {
  border-radius: $border-radius;
}

// -------------------------------------------------------------------------------------
// 全画面枠 > モーダル本体 > 内枠 > シーンコンテナ > シーン単体
// -------------------------------------------------------------------------------------
.modal_01--scene {
  padding: 40px;
  text-align: center;
  background: #fff;
  border-radius: $border-radius;

  &.is_hide {
    display: none;
  }

  &.is_show {
    display: block;
  }
}

// -------------------------------------------------------------------------------------
// 全画面枠 > モーダル本体 > 内枠 > 読み込み中表示
// -------------------------------------------------------------------------------------
.modal_01--loading {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 7px;
  opacity: 0.8;

  &.is_hide {
    display: none;
  }

  &.is_show {
    display: flex;
  }
}

// -------------------------------------------------------------------------------------
// アニメーション： 開く
// -------------------------------------------------------------------------------------
@keyframes modal_01_open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal_01_open_box {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal_01-open_anim {
  display: flex;
  animation: modal_01_open 0.3s g.$ease_out_cubic;

  .modal_01 {
    animation: modal_01_open_box 0.3s g.$ease_out_cubic;
  }
}

// -------------------------------------------------------------------------------------
// アニメーション： 閉じる
// -------------------------------------------------------------------------------------
@keyframes modal_01_close {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes modal_01_close_box {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}

.modal_01-close_anim {
  display: flex;
  animation: modal_01_close 0.2s g.$ease_out_cubic;

  .modal_01 {
    animation: modal_01_close_box 0.2s g.$ease_out_cubic;
  }
}

// -------------------------------------------------------------------------------------
// アニメーション： シーン切り替え
// -------------------------------------------------------------------------------------
@keyframes modal_01_transition_scene {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal_01-transition_scene_anim {
  display: block;
  animation: modal_01_transition_scene 0.5s g.$ease_out_cubic;
}