@include pc-layout {
  .calling {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    min-width: $min-width; min-height: $min-height;
    background-color: $theme-purple;
    overflow: hidden;
    z-index: 1001;
  }

  /*** bg ***/
  .calling__bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;

    div {
      position: relative;
      float: left;
      width: 25%; height: 25%;
      overflow: hidden;

      &::after {
        content: ""; display: block;
        width: 100%; height: 100%;
        background-color: #333;
        transform: translateX(-100%);
      }
    }

    &::after { content: ""; display: block; clear: both; }
  }

  /*** controls-btn ***/
  .calling__controls-btn {
    position: absolute;
    bottom: 100px; left: calc(50% - 250px);
    width: 500px; height: 80px;

    .btn {
      position: absolute; top: 0;
      width: 80px; height: 80px;
      overflow: hidden;
      border-radius: 15px;
      transform: rotate(45deg);

      .fa-phone {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        font-size: 45px;
        text-align: center;
        line-height: 80px;
        display: block;
        opacity: 0;
      }
      
      div {
        position: absolute;
        &::after {
          content: ""; display: block;
          width: 100%; height: 100%;
          background-color: rgba(255,255,255,0.6);
        }
      }
      div:nth-child(1),
      div:nth-child(3) { left: 0; width: 100%; height: 2px; }
      div:nth-child(2),
      div:nth-child(4) { top: 0; width: 2px; height: 100%; }
      div:nth-child(1) {
        top: 0;
        &::after { transform: translateX(100%); }
      }
      div:nth-child(2) {
        left: 0;
        &::after { transform: translateY(-100%); }
      }
      div:nth-child(3) {
        bottom: 0;
        &::after { transform: translateX(-100%); }
      }
      div:nth-child(4) {
        right: 0;
        &::after { transform: translateX(100%); }
      }
    }
    .btn-1 {
      left: 0;
      .fa-phone { color: #af5853; transform: rotate(180deg); }
    }
    .btn-2 {
      right: 0;
      .fa-phone { color: #6C9A7B; transform: rotate(45deg); }
    }

    .touch {
      position: absolute;
      top: 0; right: 0;
      width: 80px; height: 80px;
      border-radius: 50%;
      border: solid 40px #fff;
      box-sizing: border-box;
      opacity: 0;
    }
  }

  /*** icons ***/
  .calling__icons {
    position: absolute;
    top: 100px; left: calc(50% - 400px);
    width: 800px; height: 150px;

    .icon-box {
      position: relative;
      margin-right: 100px;
      float: left;
      width: 200px; height: 200px;

      .icon {
        position: absolute;
        width: 100%; height: 100%;
        background-color: #fff;
        border-radius: 50%;
        transform: scale(0);
        z-index: 1;

        &::after {
          margin: 5px;
          content: ""; display: block;
          width: calc(100% - 10px); height: calc(100% - 10px);
          background-size: cover;
          background-position: center;
          border-radius: 50%;
          transform: scale(0);
        }
      }

      .name {
        position: absolute;
        left: 50px; bottom: -50px;
        width: 100px; height: 30px;
        font-size: 16px;
        text-align: center;
        line-height: 30px;
        color: #fff;
        overflow: hidden;

        span { display: block; transform: translateY(100%); }
        &::after {
          position: absolute;
          bottom: 0; left: 0;
          content: ""; display: block;
          width: 100%; height: 1px;
          transform: translateX(-100%);
        }
      }

      &::before,
      &::after {
        content: ""; display: block;
        position: absolute;
        width: calc(100% - 70px); height: calc(100% - 70px);
        background-color: #fff;
        border-radius: 50%;
        opacity: 0;
      }
      &::before { top: -5px; left: -5px; }
      &::after  { bottom: -5px; right: -5px; }
    }
    .icon-box:last-child { margin-right: 0; }
    .icon-box:nth-child(1) {
      .icon:after {
        background-color: $theme-light-purple;
        background-image: url(../images/calling/icons/yui.png);
      }
      .name:after { background-color: $theme-light-purple; }
    }
    .icon-box:nth-child(2) {
      .icon:after {
        background-color: $theme-pink;
        background-image: url(../images/calling/icons/gab.png);
      }
      .name:after { background-color: $theme-pink; }
    }
    .icon-box:nth-child(3) {
      .icon:after {
        background-color: $theme-mint;
        background-image: url(../images/calling/icons/eriri.png);
      }
      .name:after { background-color: $theme-mint; }
    }
  }

  /*** controls-bar ***/
  .calling__controls-bar {
    position: absolute;
    bottom: 60px; left: 50%;
    width: 0px; height: 60px;
    background-color: #222;
    border-radius: 30px;

    .inner {
      width: 280px;
      margin: 0 auto;
    }

    .btn {
      float: left;
      width: 60px; height: 60px;
      font-size: 25px;
      text-align: center;
      line-height: 60px;
      color: #999;
      display: block;
      margin-right: 50px;
      opacity: 0;
    }
    .btn .fa-phone { transform: rotate(225deg); color: #af5853; font-size: 30px; }
    .btn:last-child { margin-right: 0; }
  }

  .calling[data-state="start"] {
    /*** bg ***/
    .calling__bg {
      div:nth-child(1):after,
      div:nth-child(2):after,
      div:nth-child(3):after,
      div:nth-child(4):after { animation: slide-right 0.4s ease 0s forwards; }
      div:nth-child(5):after,
      div:nth-child(6):after,
      div:nth-child(7):after,
      div:nth-child(8):after { animation: slide-right 0.4s ease 0.1s forwards; }
      div:nth-child(9):after,
      div:nth-child(10):after,
      div:nth-child(11):after,
      div:nth-child(12):after { animation: slide-right 0.4s ease 0.2s forwards; }
      div:nth-child(13):after,
      div:nth-child(14):after,
      div:nth-child(15):after,
      div:nth-child(16):after { animation: slide-right 0.4s ease 0.3s forwards; }
    }

    /*** icons ***/
    .calling__icons {
      animation: fadeout 0.5s ease 6.6s forwards;
      .icon-box .name { animation: fadeout 0.5s ease 6.6s forwards; }
      .icon-box:nth-child(1) {
        .icon {
          animation:
            scale0-0dot5 0.3s ease 2.5s alternate 2 forwards,
            scale0-1 0.5s ease 3.1s forwards;
          &::after {  
            animation:
              scale0-0dot5 0.3s ease 3.3s alternate 2 forwards,
              scale0-1 0.5s ease 3.9s forwards;
          }
        }
        .name {
          span { animation: slide-top 0.7s ease 4.5s forwards; }
          &::after { animation: slide-right 0.3s ease 4.6s forwards; }
        }
        &::before { animation: calling__icon-frame-1 0.8s ease 4s forwards; }
        &::after  { animation: calling__icon-frame-2 0.8s ease 4.1s forwards; }
      }
      .icon-box:nth-child(2) {
        .icon {
          animation:
            scale0-0dot5 0.3s ease 1.5s alternate 2 forwards,
            scale0-1 0.5s ease 2.1s forwards;
          &::after {  
            animation:
              scale0-0dot5 0.3s ease 2.3s alternate 2 forwards,
              scale0-1 0.5s ease 2.9s forwards;
          }
        }
        .name {
          span { animation: slide-top 0.7s ease 3.5s forwards; }
          &::after { animation: slide-right 0.3s ease 3.6s forwards; }
        }
        &::before { animation: calling__icon-frame-1 0.8s ease 3s forwards; }
        &::after  { animation: calling__icon-frame-2 0.8s ease 3.1s forwards; }
      }
      .icon-box:nth-child(3) {
        .icon {
          animation:
            scale0-0dot5 0.3s ease 3.5s alternate 2 forwards,
            scale0-1 0.5s ease 4.1s forwards;
          &::after {  
            animation:
              scale0-0dot5 0.3s ease 4.3s alternate 2 forwards,
              scale0-1 0.5s ease 4.9s forwards;
          }
        }
        .name {
          span { animation: slide-top 0.7s ease 5.5s forwards; }
          &::after { animation: slide-right 0.3s ease 5.6s forwards; }
        }
        &::before { animation: calling__icon-frame-1 0.8s ease 5s forwards; }
        &::after  { animation: calling__icon-frame-2 0.8s ease 5.1s forwards; }
      }
    }

    /*** controls-btn ***/
    .calling__controls-btn {
      animation: fadeout 0.5s ease 6.6s forwards;
      .btn-1 {
        div:nth-child(1):after { animation: slide-left 0.6s ease 0.7s forwards; }
        div:nth-child(2):after { animation: slide-bottom 0.6s ease 0.7s forwards; }
        div:nth-child(3):after { animation: slide-right 0.6s ease 0.7s forwards; }
        div:nth-child(4):after { animation: slide-top 0.6s ease 0.7s forwards; }
        .fa-phone { animation: calling__show-btn-1 0.7s ease 1s forwards; }
      }
      .btn-2 {
        animation: calling__press-btn 0.3s ease 5.9s alternate 2 forwards;
        div:nth-child(1):after { animation: slide-left 0.6s ease 0.9s forwards; }
        div:nth-child(2):after { animation: slide-bottom 0.6s ease 0.9s forwards; }
        div:nth-child(3):after { animation: slide-right 0.6s ease 0.9s forwards; }
        div:nth-child(4):after { animation: slide-top 0.6s ease 0.9s forwards; }
        .fa-phone { animation: calling__show-btn-2 0.7s ease 1.2s forwards; }
      }
      .touch { animation: calling__touch-btn 0.6s ease 5.9s forwards; }
    }

    /*** controls-bar ***/
    .calling__controls-bar {
      animation: calling__show-controls-bar 0.4s ease 6.6s forwards;
      div:nth-child(1) {
        animation:
          fadein 0.8s ease 7s forwards,
          scale0-1 0.8s ease 7s forwards;
      }
      div:nth-child(2) {
        animation:
          fadein 0.8s ease 7.4s forwards,
          scale0-1 0.8s ease 7.4s forwards;
      }
      div:nth-child(3) {
        animation:
          fadein 0.8s ease 7.2s forwards,
          scale0-1 0.8s ease 7.2s forwards;
      }
    }
  }
}