$transition-property: visibility, opacity;
$transition-duration: 0.3s;
$transition-timing: ease-out;


$color_bg: rgba(20,20,20, 0.9);
$color_txt: #eeeeee;
$color_highlight: #7eafda;
span.dzs-button,a.dzs-button{
  display: inline-block;
}
.dzs-button{

  cursor: pointer;
  position: relative;


  line-height: 1.6;

  font-size: 13px;

  color: #fff9f9;




  $transition-property: color,border,opacity;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;

  @include apply_transition($transition-property,$transition-duration,$transition-timing);

  &:before{
    content: '';
    position: absolute;
    //z-index: -1;
    transform: translate3d(0,0,0);
    top:0;
    left:0;
    width: 100%; height: 100%;
    background-color: #444444;
    $transition-property: background,transform,opacity;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;

    @include apply_transition($transition-property,$transition-duration,$transition-timing);
  }

  &{

    padding: 7px 12px;
  }
  .the-text{
    position: relative;
    display: inline-block;
    $transition-property: background,transform,opacity;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;

    @include apply_transition($transition-property,$transition-duration,$transition-timing);
  }


  $color_light: #eee;
  $color_dark: #444;

  &.color-normal-dark,&.color-over-dark:hover{

    color: $color_light;

    &:before{

      background-color: $color_dark;
    }
  }

  &.color-normal-light,&.color-over-light:hover{

    color: $color_dark;
    &:before {
      background-color: $color_light;
    }
  }
  &.color-normal-highlight,&.color-over-highlight:hover{

    color: $color_light;
    &:before {
      background-color: $color_highlight;
    }
  }


  &.btn-style-border-outside{
    &.color-normal-highlight{
      color: $color_highlight;
      border-color: $color_highlight;
    }
    &.color-over-highlight:hover{
      color: $color_light;
      border-color: $color_highlight;
      &:before{
        opacity: 1;
        background-color: $color_highlight;

      }
    }
  }

  &.btn-style-border-outside{
    &.color-normal-dark{
      color: $color_dark;
      border-color: $color_dark;
    }
    &.color-over-dark:hover{
      color: $color_light;
      border-color: $color_dark;
      &:before{
        opacity: 1;
        background-color: $color_dark;

      }
    }
  }

  &.btn-style-border-outside{
    &.color-normal-light{
      color: $color_light;
      border-color: $color_light;
    }
    &.color-over-light:hover{
      color: $color_dark;

      border-color: $color_light;
      &:before{
        opacity: 1;
        background-color: $color_light;

      }
    }
  }









  &.skinvariation-border-radius-more{
    &,&:before{
      border-radius: 20px;
    }

    &.btn-padding-hero{
      &,&:before{

        border-radius: 30px;
      }
    }

    &.btn-style-border-outside{
      &:before{
        border-radius: 15px;
      }
    }
  }


  &.font-size-small{
    font-size: 11px;
  }

  &.font-size-big{
    font-size: 17px;
  }




  &.image-background{
    background-size: cover;


    background-position:  center center;

    &:before{
      display: none;
    }

    .the-text{
      text-shadow: 0 0 2px rgba(0,0,0,0.5);
    }
  }


  .the-text{

    >i{
      font-size: 120%;
      opacity: 0.6;
    }

    i{
      display: inline-block;
      vertical-align: middle;

      margin-right: 10px;


      &+.the-text-text{

        display: inline-block;
        vertical-align: middle;

      }
    }
  }

}




.btn-style-border-outside.effect-background-touch{
  perspective: 800px;
  &:before{
    //transform: translate3d(0,0,-100px);
    transform: translate3d(0,0,-100px) scale(0.9);
  }

  &:hover:before{

    transform: translate3d(0,0,0px) scale(1);
  }
}

.effect-background-scale{

  &:before{

    transform: translate3d(0,0,0px) scale(1);
  }
  .the-text{

    transform: translate3d(0,0,0px) scale(1);
    display: inline-block;


    font-size: 100%;

    $transition-property: font;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;

    @include apply_transition($transition-property,$transition-duration,$transition-timing);
  }
  &:hover{

    .the-text{

      transform: translate3d(0,0,0px) scale(1);
      font-size: 105%;
    }
    &:before{

      transform: translate3d(0,0,0px) scale(0.9);
    }
  }

}

.effect-opacity{
  opacity: 0.8;

  &:hover{
    opacity: 1;
  }

}

.dzs-btn-shadow{
  box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}
.btn-padding-small{


  &{
    font-size: 80%;
    padding: 3px 8px;
  }
}
.btn-padding-medium{

}
.btn-padding-big{

  &{
    padding: 12px 19px;
  }

}
.btn-padding-hero{

  &{
    padding: 18px 27px;
  }

}

.text-strong{
  font-weight: 700;
}
.btn-style-default{





  &,&:before{

    border-radius: 5px;
  }


}
.btn-style-border-outside{


  color: #222222;
  font-weight: bold;
  border: 2px solid rgba(50,50,50,1);

  &:before{

    opacity: 0;

  }

  &:hover{

  }


}

.dzs-button + .dzs-button{
  vertical-align: bottom;
  margin-left: 5px;
}