// Handle all of the staging for our SVG stuff

.iphoneSVG {
  position: relative;
}
.iphoneSVG #iphoneSVG {
  position: absolute;
  top: 13.7%;
  left: 12.1%;
  width: 75.7%;
  svg {
    width: 100%;
    height: auto;
    position:absolute;
  }
  img {
    max-width: 100% !important;
  }
}

.dashboardSVG {
  position: relative;
}

.dashboardSVG #dashboardSVG {
  position: absolute;
  top: 7.6%;
  left: 6.2%;
  width: 87.6%;
  svg {
    width: 100%;
    height: auto;
    position:absolute;
  }
  & + img { position: relative; }
}

.store__stage {

  @media(max-width:$screen-md) {
    .iphoneSVG { width: 75%; }
  }

  .dashboardSVG {
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    opacity: .7;
    -webkit-filter: blur(1px);
    filter: blur(1px);

    #dashboardSVG {
      position: absolute;
      top: 7.6%;
      left: 6.2%;
      width: 87.6%;
      svg {
        width: 100%;
        height: auto;
        position:absolute;
      }
      & + img { position: relative; }
    }
  }


  .iphoneSVG {
    position: absolute;
    left: 0;
    top: 50px;
    width: 45%;
    #iphoneSVG {
      position: absolute;
      top: 13.7%;
      left: 12.1%;
      width: 75.7%;
      svg {
        width: 100%;
        height: auto;
        position:absolute;
      }
      & + img { position: relative; }
    }
  }

@media(max-width:$screen-md) {
  .iphoneSVG { width: 75%; }
}

.iphoneSVG.iphoneSVG--img {
  // for when you want to strip positioning from phone
  position: normal !important;
  width: 100% !important;
}
  .iphoneSVG {
    transition: 0.3s all ease-in-out;
    img { width: 100%; }
  }

  .dashboardSVG {
    transition: 0.3s all ease-in-out;
    img { width: 100%; }
  }
}

@media (min-width: $screen-lg-min) {
  .wrapper__mini-store {
    min-height: 80vh;
  }
}

.callToActionSVG {
  opacity: 0;
  z-index: -1;
  position: relative;
  color: white;
  height: 0;
  width: 0;
  transition: 0.6s opacity cubic-bezier(0.255, 1.490, 0.245, 0.615);
  .cta {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  .screen {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    content: '';
    background: black;
    opacity: 0.8;

  }
}

.store__stage--iphoneZoomed {
  // background: red;

  .iphoneSVG {
    width: 55%;
    left: 23%;
  }

  .dashboardSVG {
    top: 5%;
    right: 0;
    width: 40%;
    -webkit-filter: blur(4px);
    filter: blur(4px);
  }
}
.store__stage--iphoneFocused {
  // background: blue;

  .iphoneSVG {
    width: 81%;
    left: 11%;
  }

  .dashboardSVG {
    top: 5%;
    right: 0;
    width: 40%;
    opacity: 0.4;
    -webkit-filter: blur(4px);
    filter: blur(4px);
  }
}

.store__stage--dashboardZoomed {
  // background: green;

  .iphoneSVG {
    width: 15%;
    left: 2%;
    top: 0;
    z-index: 79;
    opacity: 0.2;
    -webkit-filter: blur(4px);
    filter: blur(4px);
  }

  .dashboardSVG {
    top: 15%;
    right: 0%;
    width: 100%;
    z-index: 80;
    opacity: 1.0;
    -webkit-filter: blur(0px);
    filter: blur(0px);
    // z-index: 999;
  }
}
.store__stage--cta {
  // Show Sign Up Now
  // background: yellow;
  .callToActionSVG {
    z-index: 90;
    opacity: 1;
    height: 100%;
    width: 100%;
  }
}