// IMPORT
@import url('https://fonts.googleapis.com/css?family=Muli:300,400,700,900');

// VARIABLES 
// $canvasBg: #f7f7f7; Grey
$canvasBg: #f1f3f9; // Bright #d5dbed

$textC: #333333;
$col1: #ff8c69;
$col2: ff696c;
$col3: #1462ff;
$col4: #f0f1f5;

$svgC: rgba(#929cd0, .8);
// $shadowC: #d1d4e1;
$shadowC: #d5dbed;
$shadowDef: 0 3px 20px -3px $shadowC;
$shadowDefTwo: 0 6px 30px -10px $shadowC;

// PLACEHOLDERS
%no-selection {
  // No selection
  -webkit-user-select: none;  
  -moz-user-select: none;     
  -ms-user-select: none;      
  user-select: none;    
}

// DEFAULT
html {
  display: flex;
  justify-content: center;
  align-items: center;
  background: $canvasBg;
  height: 100vh;
  font-family: 'Muli', Arial, sans-serif;
}

// SVGs
#dribbble {
  position: fixed;
  display: block;
  right: 70px;
  bottom: 16px;
  svg {
    display: block;
    width: 76px;
    height: 24px;
    fill: $svgC;
  }
}
#twitter {
  position: fixed;
  display: block;
  right: 25px;
  bottom: 11px;
  svg {
    width: 24px;
    height: 24px;
    fill: $svgC;
  }
}

// NEW CODE HERE

// Variables
$col3s: #4a74c9;

$t: 249ms;
$cB: cubic-bezier(.63,.01,.26,1);
$cB2: cubic-bezier(.28,.01,0,.98);

// Icon Container 
.fingerprint-icon-container {
  position: absolute;
  width: auto;
  height: auto;
  top: -25.5px;
  left: -25.5px;
  opacity: 0;
  transition: opacity 249ms $cB;
}
.fingerp-pos {
  position: absolute;
}

// Fingerprint Icon
.fingerprint {
  width: 52px;
  height: auto;
  svg {
    width: 52px;
    height: auto;
  }
}
// Front Icon
.front .path {
  stroke: rgb(255,255,255);
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

// Back Icon
.back .path {
  stroke: rgba(255,255,255,.5);
  stroke-dasharray: 0;
  stroke-dashoffset: 1000;
}

// Fingerprint Animation Delay
@for $i from 0 through 3 {
  .path-#{$i} {
    animation-delay: 699ms / $i;
  }
}

// Fingerprint Animation
@keyframes ver {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

// Container 
.cs-btn-container {
  position:relative;  
}

// Block
.block {
  width: 170px;
  height: 50px;
  background: transparent;
  position: absolute;
  z-index: 9;
  display: none;
}

// Button
.cs-btn {
  // width: 170px;
  // height: 50px;
  background: lighten($col3, 0%);
  // background: lighten($col3, 10%);
  border-radius: 9px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  cursor: pointer;
  box-shadow: 0 6px 30px -10px rgba($col3s, 1);
  @extend %no-selection;
  transition: background $t*2 $cB;
}

%btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: absolute;
  opacity: 1;
}

.cs-btn-content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: relative;
  opacity: 1;
}

.cs-copy-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: absolute;
  opacity: 1;
  transition: opacity 449ms $cB;
}

.cs-btn-text {
  font-size: 1.2em;
  color: #fff;
  margin: 0 10px 0 0;
}

.cs-btn-icon {
  color: #fff;
  width: 20px; 
  margin: 2px 0 0 10px;
  display: block;
}
.cs-checked-icon {
  display: none;
}

// Behaviours

// Button
.cs-btn:hover {
  background: lighten($col3, 10%);
  transition: background $t $cB;
}

.cs-stp-one {
  width: 170px;
  height: 50px;
}

.cs-stp-one {
  width: 170px;
  height: 50px;
}

.cs-stp-two {
  width: 75px;
  height: 75px;
}

.cs-stp-three {
  width: 170px;
  height: 50px;
}

.cs-btn-act {
  animation: btn-act-one 299ms $cB forwards;
}

.cs-btn-act-two {
  animation: btn-act-two 299ms $cB forwards;
}

@keyframes btn-act-one {
  0% { width: 170px; height: 50px; }
  100% { width: 75px; height: 75px; }
}

@keyframes btn-act-two {
  0% { width: 75px; height: 75px; }
  100% { width: 170px; height: 50px; }
}

// Content Copy+Icon
.cs-copy-icon-op {
  opacity: 0;
  transition: opacity 249ms $cB;
}

// Fingerprint Icon
.icon-op-1 {
  opacity: 1;
  transition: opacity 249ms $cB;
}

.fngerprint-i-act {
  animation: ver 6499ms $cB2 forwards 99ms;
}
// Checked
.cs-checked {
  @extend %btn-wrap;
  opacity: 0;
  & > * {
    color: #fff;
  }
}