@import "mixin_colors.scss";

$FontSize: 14px;
$FontName: 'Proxima Nova Rg';
$BoxShadow: 0px 0px 8px rgba(0, 0, 0, 0.03);
$BoxShadow2: 0px 0px 8px rgba(0, 0, 0, 0.3);
$TabseTextSize: 14px;
$TabseTextHeight: 18px;

@mixin trans($time: 0.2s) {
    -moz-transition: $time;
    -webkit-transition: $time;
    -o-transition: $time;
    -ms-transition: $time;
    transition: $time;
}
@mixin flip() {
   transform: matrix(-1, 0, 0, 1, 0, 0);
}
@mixin btn() {
   	background-color: $Color2 !important;
    background-image: linear-gradient(to bottom,$Color2,$Color2);
   	box-shadow: $BoxShadow;
   	color: #fff !important;
   	border: none !important;
   	height: 40px !important;
   	padding: 0 30px !important;
   	border-radius: 5px;
   	text-shadow: none;
    display: inline-block;
    line-height: 40px !important;
    font-weight: bold;
   	@include trans;
    &:focus,
    &:active,
    &:hover{
      background-color: $Color8 !important;
      background-image: linear-gradient(to bottom,$Color8,$Color8);
      border: none;
    }
   	&.button--danger{
      padding: 0;
      background-color: transparent !important;
      &:hover{
        color: $Color5;
        text-decoration: none;
      }
   	}
    &.button--add{
      background-color: $Color1 !important;
      background-image: linear-gradient(to bottom,$Color1,$Color1);
      height: 26px;
      padding: 0 15px;
      line-height: 28px;
      &:hover{
        opacity: 0.7;
      }
    }
    &.button--delete{
      background-color: red !important;
      background-image: linear-gradient(to bottom,red,red);
      &:hover{
        opacity: 0.7;
      }
    }
}