// 
// button.scss
//

.btn { border: none !important; outline: none;  box-shadow: 0 0px 4px #7351d4; font-size: 20px; border-radius: 50px; padding: 12px 33px; font-family: 'Now';  font-weight: 500;

  &.texture_btn{position: relative; overflow: hidden; background-repeat: repeat; background-position: center; line-height: 120%; margin-bottom: 10px;

    &:after{ content: ''; position: absolute; left: -15%; top: 00%; border-radius:0 0 100% 100%; opacity: 1; width: 130%; height: 50%; z-index: 0; background: rgba($white,.6); background: -moz-linear-gradient(180deg, rgba($white,.0) 0%, rgba($white,.6) 100%); background: -webkit-linear-gradient(180deg, rgba($white,.0) 0%, rgba($white,.6) 100%); background: linear-gradient(180deg, rgba($white,.0) 0%, rgba($white,.6) 100%); }

    &:before{ content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #fff;background: rgba(255,255,255, .5); background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);}

    &.btn-lg{width: 250px; height: 90px; border-radius: 70px; color: $black; font-family: 'My Kids Handwritten'; font-size: 30px; }
    &.btn-sm{padding:12px 18px; border-radius: 70px; color: $black;font-family: 'Eras Bold ITC'; font-weight: bold; font-size: 20px; }

    &.btn-warning{ background-color: #FF8700; box-shadow: 0 5px 0 1px #B33500;
      .shad{ background: rgb(255,214,89); background: -moz-linear-gradient(180deg, rgba(255,214,89,1) 0%, rgba(255,214,89,0) 100%); background: -webkit-linear-gradient(180deg, rgba(255,214,89,1) 0%, rgba(255,214,89,0) 100%); background: linear-gradient(180deg, rgba(255,214,89,1) 0%, rgba(255,214,89,0) 100%);}
      &:hover{ background-color: rgba(255,214,89,.3); }
    } 
    &.btn-success{ background-color: #4BA600; box-shadow: 0 5px 0 1px #165C00;
      .shad{ background: rgb(198,255,41); background: -moz-linear-gradient(180deg, rgba(198,255,41,1) 0%, rgba(198,255,41,0) 100%); background: -webkit-linear-gradient(180deg, rgba(198,255,41,1) 0%, rgba(198,255,41,0) 100%); background: linear-gradient(180deg, rgba(198,255,41,1) 0%, rgba(198,255,41,0) 100%); }
      &:hover{ background-color:rgba(15, 159, 0, .5) ; }
    }
    &.btn-info{ background-color: #FF0CA3; box-shadow: 0 5px 0 1px #C10055;
      .shad{ background: rgb(255,79,201); background: -moz-linear-gradient(180deg, rgba(255,79,201,1) 0%, rgba(255,79,201,0) 100%); background: -webkit-linear-gradient(180deg, rgba(255,79,201,1) 0%, rgba(255,79,201,0) 100%); background: linear-gradient(180deg, rgba(255,79,201,1) 0%, rgba(255,79,201,0) 100%);}
      &:hover{ background-color:rgba(255,79,201,.3) ; }
    }
    .shad{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0;opacity: .5;}
    span{position: relative; z-index: 1;display: flex; justify-content: center; align-items: center;}
  }

  &.circle_texture{ background-image:url("../img/circle_texture.png") !important; background-size: 75px auto;}
  &.cancel_texture{ background-image:url("../img/cancel_texture.png") !important; background-size: 60px auto;}
  &.heart_texture{ background-image:url("../img/heart_texture.png") !important; background-size: 65px auto;}

  /*General Class*/
  &.btn-warning{ box-shadow: 0 0 3px 3px #fe5b00; color: #931F00; background: rgb(253,224,0); background: -moz-linear-gradient(180deg, rgba(253,224,0,1) 0%, rgba(230,201,0,1) 100%); background: -webkit-linear-gradient(180deg, rgba(253,224,0,1) 0%, rgba(230,201,0,1) 100%); background: linear-gradient(180deg, rgba(253,224,0,1) 0%, rgba(230,201,0,1) 100%);
      &:hover{background: rgb(253,224,0); background: -moz-linear-gradient(180deg, rgba(253,224,0,1) 0%, rgba(186,163,4,1) 100%); background: -webkit-linear-gradient(180deg, rgba(253,224,0,1) 0%, rgba(186,163,4,1) 100%); background: linear-gradient(180deg, rgba(253,224,0,1) 0%, rgba(186,163,4,1) 100%);}
  }
  &.btn-sm{ font-size: 20px; padding: 5px 30px; border-radius: 20px;
    img{ width: 20px; height: auto; margin-left: 7px; }
  }
  &.btn-fade{font-family: 'Fredoka One'; font-size: 20px;background: rgba(57, 115, 124, .3); border-radius: 10px;
    &:hover{background: rgba(57, 115, 124, .5);}
  }
  
  &.btn-danger{ background-color: #cc1803; color: #fff;}   
}