// buttons

.btn {
  outline: none !important;
  margin-top: 10px;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
  line-height: 2rem;
  border-radius: $btn-curved;
  border: none;
  box-shadow: $shadow;
  &.btn-squared {
    border-radius: 0 !important;
  }
  &.btn-circle {
    border-radius: $circle !important;
    letter-spacing: 0 !important;
    width: 45px;
    height: 45px;
    line-height: 33px;
    margin-right: 5px;
    &:before {
      margin: 0 !important;
    }
  }
  &:focus, &.focus {
    border-color: 0;
  }
  &:hover {
    box-shadow: $shadow-hover;
  }
  &.bg-white {
    color: $heading-color;
    background: $white;
    &:hover {
      background: $white;
      color: $heading-color;
      border: $white;
    }
  }
  &.btn-white {
    color: $heading-color;
    background: $white;
    &:hover, &:focus,
    &:not(:disabled):not(.disabled).active {
      background: $white;
      color: $heading-color;
    }
  }
  &.btn-primary {
  	color: $white;
  	background-color: $primary;
    &:hover {
      color: $white;
    	background-color: $primary;
    }
  }
  &.btn-secondary {
  	color: $white;
  	background-color: $secondary;
    &:hover {
      color: $white;
    	background-color: $secondary;
    }
  }
  &.btn-gradient {
  	color: $white;
  	background: $gradient;
    &:hover {
      color: $white;
    	background: $gradient;
    }
  }
  &.btn-success {
		background: $green;
		color: $black;
		border-color: $green;
    &:hover {
      color: $black;
    	background: $green;
      border-color: $green;
    }
	}
  &.btn-danger {
		background: $red;
		color: $white;
		border-color: $red;
    &:hover {
      color: $white;
    	background: $red;
      border-color: $red;
    }
	}
  &.btn-warning {
		background: $yellow;
		color: $black;
		border-color: $yellow;
    &:hover {
      color: $black;
    	background: $yellow;
      border-color: $yellow;
    }
	}
  &.btn-info {
		background: $light-blue;
		color: $black;
		border-color: $light-blue;
    &:hover {
      color: $black;
    	background: $light-blue;
      border-color: $light-blue;
    }
	}
  &.btn-large {
  	padding: 0.75rem 2rem;
  	font-size: $body-size * 1.1;
  }
  &.btn-medium {
  	padding: 0.5rem 1.5rem;
  	font-size: $body-size;
  }
  &.btn-small {
  	padding: 0.25rem 1rem;
  	font-size: $body-size * .75;
  }
  &.btn-facebook {
  	background: #3b5998;
    color: $white;
    &:before {
      content: "\f39e";
      font-family: "Font Awesome 5 Brands";
      margin-right: 10px;
    }
  }
  &.btn-twitter {
  	background: #1da1f2;
    color: $white;
    &:before {
      content: "\f099";
      font-family: "Font Awesome 5 Brands";
      margin-right: 10px;
    }
  }
  &.btn-instagram {
  	background: #c32aa3;
    color: $white;
    &:before {
      content: "\f16d";
      font-family: "Font Awesome 5 Brands";
      margin-right: 10px;
    }
  }
  &.btn-dribbble {
  	background: #ea4c89;
    color: $white;
    &:before {
      content: "\f17d";
      font-family: "Font Awesome 5 Brands";
      margin-right: 10px;
    }
  }
  &.btn-behance {
  	background: #053eff;
    color: $white;
    &:before {
      content: "\f17d";
      font-family: "Font Awesome 5 Brands";
      margin-right: 10px;
    }
  }
  &.btn-linkedin {
  	background: #007bb5;
    color: $white;
    &:before {
      content: "\f0e1";
      font-family: "Font Awesome 5 Brands";
      margin-right: 10px;
    }
  }
  &.btn-reddit {
  	background: #ff4500;
    color: $white;
    &:before {
      content: "\f1a1";
      font-family: "Font Awesome 5 Brands";
      margin-right: 10px;
    }
  }
  &.btn-skype {
  	background: #00aff0;
    color: $white;
    &:before {
      content: "\f17e";
      font-family: "Font Awesome 5 Brands";
      margin-right: 10px;
    }
  }
  &.btn-youtube {
  	background: #ff0000;
    color: $white;
    &:before {
      content: "\f167";
      font-family: "Font Awesome 5 Brands";
      margin-right: 10px;
    }
  }
  &.btn-pinterest {
  	background: #bd081c;
    color: $white;
    &:before {
      content: "\f231";
      font-family: "Font Awesome 5 Brands";
      margin-right: 10px;
    }
  }
  &.btn-github {
  	background: #211f1f;
    color: $white;
    &:before {
      content: "\f09b";
      font-family: "Font Awesome 5 Brands";
      margin-right: 10px;
    }
  }
}

.video-btn {
  width: 80px;
  height: 80px;
  display: inline-block;
  outline: none;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 80px;
  text-align: center;
  color: $white;
  background: $gradient;
  font-size: 1.5rem;
  border-radius: $circle;
  border: none;
  box-shadow: $shadow;
  animation: pulse-purple 2s infinite alternate;
  &:hover {
    box-shadow: $shadow-hover;
    color: $white;
  }
  &.bg-white {
    background: $white;
    color: $primary;
    &:hover {
      box-shadow: $shadow-hover;
      color: $primary !important;
    }
  }
}

@keyframes pulse-purple {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

@keyframes scalebtn {
	0% {
		@include transform(scale(1.0));
	}

	100% {
		@include transform(scale(1.1));
	}
}
