@mixin transition($value) {
  -webkit-transition: $value;
  transition: $value;
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

@mixin transform($value) {
  -o-transform: $value;
  -ms-transform: $value;
  -webkit-transform: $value;
  transform: $value;
}

.share-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 200;
  .share-popup {
    height: 220px;
    width: 100%;
    background: #fff;
    bottom: 0;
    position: absolute;
    z-index: 2;
  	padding: 12px;
    @include transform(translateY(100%));
	  @include transition(all 0.3s cubic-bezier(0.4, 0.0, 0.6, 1));
  }
  .overlay {
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    position: absolute;
    display: none;
  }
  &.open {
    width: 100%;
    height: 100%;
  	.overlay {
  		display: block;
  		opacity: 0.4;
  	}
  	.share-popup {
	  	@include transform(translateY(0px));
  	}
  }
  .sp-tab {
  	height: 40px;
    line-height: 40px;
    display: block;
    color: #7f7f7f;
  	&.copy {
  		height: 70px;
  		.copy-input {
  			width: 100%;
  			height: 30px;
        line-height: 30px;
  			// border: 1px solid #e6e6e6;
  			input {
  				width: 96%;
          outline: none;
          border: none;
  			}
  		}
  	}
    .icon {
      background-image: url('./social-sprite.png'); 
      width: 30px;
      height: 24px;
      background-size: cover;
      background-repeat: no-repeat;
      display: inline-block;
      vertical-align: middle;
      &.copy {
        background-position: 75%;
      }
      &.whatsapp {
        background-position: 47%;
      }
      &.fb {
        background-position: 0;
      }
      &.gmail {
        background-position: 101%;
      }
      &.twitter {
        background-position: 24%;
      }
    }
    .text {
      margin-left: 5px;
    }
  }
}

a {
  text-decoration: none;
}