$header: var(--header)!important;
$body: var(--body)!important;
$footer: var(--footer)!important;
$links: var(--links)!important;
$buttons: var(--buttons)!important;
$letters: var(--letters)!important;

@mixin background($imgpath,$position: center,$size: cover,$repeat: no-repeat) {
  background: {
      image: url($imgpath);
      position: $position;
      repeat: $repeat;
      size: $size;
  }
}
@mixin transform_time($total_time) {
  -webkit-transition: $total_time;
  transition: $total_time;
}

@mixin gradient_color{
background: linear-gradient(to right, #ff0000 0%, #c6019a 50%, #ff0000 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% auto;
&:hover{
  background-position: center right;
}
}

@mixin placeholder {
&.placeholder {
  @content;
}
&:-moz-placeholder {
  @content;
}
&::-moz-placeholder {
  @content;
}
&::-webkit-input-placeholder {
  @content;
}
}
@mixin transition($args: all 0.6s ease 0s) {
-webkit-transition: $args;
-moz-transition: $args;
-o-transition: $args;
transition: $args;
}

@mixin keyframes ($animation-name) {
@-webkit-keyframes #{$animation-name} {
  @content;
}
@-moz-keyframes #{$animation-name} {
  @content;
}
@-o-keyframes #{$animation-name} {
  @content;
}
@keyframes #{$animation-name} {
  @content;
}
}

@mixin disabled_button {
border: 2px solid #a6a6a6a6!important;
background-color: rgba(0,0,0,.12)!important;
color: rgba(0,0,0,.26)!important;
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

@mixin button_primary($color, $primary, $width:auto) {
display: inline-block;
// padding: 12px 44px;
padding: 10px 30px;
border-radius: 50px;
background-color: transparent;
font-size: 15px;
font-family: $font_stack_2;
font-weight: bold;
color: $color;
@include transform_time(0.5s);
text-transform: uppercase;
border: 1px solid $buttons;
width: $width;
max-width: 450px;
cursor: pointer;

&:hover{
  color: $white_color !important;
  background-color: $buttons;
}

&:disabled{
  @include disabled_button;
}

@media #{$small_mobile}{
  padding: 10px 30px;
  // margin-top: 20px;
}
@media #{$large_mobile}{
  padding: 10px 30px;
  // margin-top: 20px;
}
@media #{$tab_device}{
  padding: 10px 30px;
  // margin-top: 25px;
}
@media #{$medium_device}{

}
}

@mixin button_secondary($color, $primary, $width:auto) {	
display: inline-block;
// padding: 12px 44px;
padding: 10px 30px;
border-radius: 50px;
background-color: $primary;
font-size: 15px;
font-family: $font_stack_2;	
font-weight: bold;
color: $color;
@include transform_time(0.5s);
text-transform: uppercase;
border: 2px solid $primary;
width: $width;
cursor: pointer;

&:hover{
  color: $primary;
  border: 2px solid $primary;
  background-color: transparent!important;
}

&:disabled{
  @include disabled_button;
}

@media #{$small_mobile}{
  padding: 10px 30px;
  margin-top: 20px;
}
@media #{$large_mobile}{
  padding: 10px 30px;
  margin-top: 20px;
}
@media #{$tab_device}{
  padding: 10px 30px;
  margin-top: 25px;
}
@media #{$medium_device}{

}
}

@mixin button_pulse($background, $color) {

background: $background;
border-radius: 50%;
box-shadow: 0 0 0 0 $background;
margin: 10px;
height: 20px;
width: 20px;
color: $color!important;
transform: scale(1);
animation: pulse-key 2s infinite;	

@keyframes pulse-key {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 $background;
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px $background;
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 $background;
  }
}
}