//
  autor: Marco Barría
  https://twitter.com/marco_bf

figure.circle
  .mask-b
    span.ok-btn OK
    .cursor

.credit-design
  p
    a(href='http://www.krop.com/mattwheeler/') Matthew Wheeler
    |  design and illustration of the great 
    a(href='http://www.chrislueders.de/sponsorpay') Chris Luders.

$d: 215px;
$w:$d;
$h:$d;
$color-base: rgba(27,45,65,1);
$color-btn: #1AAF5D;

/* images sprites
*/

$background-ok:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/ok_1.svg) no-repeat center center;

$hover: 650ms;

$ease: cubic-bezier(0.680, -0.550, 0.265, 1.650);

.circle{
  cursor: pointer;
  width: $w;
  height: $h;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transform: translate(-50%, -50%);
}
  
.mask-a, 
.mask-b{
  border-radius: 100%;
  position: relative;
  width: 100%;
  height: 100%;
}

.mask-a{
  background: $color-base;
  overflow: hidden;
  // Solution to the problem of overflow. Chrome
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 215px 215px;
  -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/953/mask_svg.svg);
  z-index: 10;
}

.mask-b{
  background: $color-base;
}


/*=====================================================================================
    OK
=======================================================================================
*/

.cursor,
.cursor::before{
  background:$background-ok;
  position:absolute;
  width: 44px;
  height: 44px;
}

.cursor{
  background-position: 0px -31px;
  top: 7em;
  left: 9em;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform ($hover - 100) ease;
  &::before{
    background-position: -43px -30px;
    content:"";
    top: -0.3em;
    left: 0.3em;
    will-change: transform;
    transform: translateX(0px) translateZ(0px);
    transition: transform ($hover - 100) ease;
  }
}
//148 70
.ok-btn{
  background: $color-btn;
  border-radius: 0.7em;
  box-shadow: 0 5px 0 #0A7237;
  color: #fff;
  font-size: 2em;
  font-weight: 500;
  text-shadow: 0 2px 0 #0A7237;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 148px;
  height: 70px;
  margin-left: -(148px/2);
  margin-top: -(70px/2);
  will-change: transform;
  transform: translateY(0px) translateZ(0px);
  line-height: 70px;
  transition: all ($hover - 100) ease;
}

.circle:hover > .mask-b{
  > .ok-btn{
    background:darken($color-btn, 5%);
    box-shadow: 0 0 0 1px darken(#0A7237, 10%), inset 0 1px 0 0 #0A7237;
    transform: translateY(5px) translateZ(0px);
    transition: all ($hover - 200) 100ms $ease;
  }
  > .cursor{
    transform: translate3d(-0.3em, 0.5em, 0);
    transition: transform ($hover - 200) $ease;
    &::before{
      transform: translateX(-4px) translateZ(0px);
      transition: transform ($hover - 200) $ease;
    }
  }
}


*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

html,
body {
  height:100%;
  overflow-x:hidden;
}

body{
  background:#1E4063;
  font-family: 'Fira Sans', sans-serif;
}

figure {
  margin: 0;
}

.credit-design {
  color: lighten($color-base, 15);
  font-weight: 400;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 20px;
  font-size: 0.8rem;
  text-align: center;
  a {
    color: lighten($color-base, 20);
    text-decoration: none;
  }
}