@import '../common/var-nb.scss';
@import '../mixins/utils.scss';
@import '../mixins/mixins.scss';

$--button-default-color: $--color-primary !default;
$--button-default-fill: $--color-grey-lighter !default;
$--button-default-gradient-start-color: $--color-primary !default;
$--button-default-gradient-end-color: #e8d39f !default;
$--button-default-focus-gradient-start-color: #e8d39f !default;
$--button-default-focus-gradient-end-color: #e8d300 !default;
$--button-default-border-raduis: 4px !default;

$--button-primary-color: $--color-white !default;
$--button-primary-gradient-start-color: $--color-primary !default;
$--button-primary-gradient-end-color: #e8d39f !default;
$--button-primary-focus-gradient-start-color: #e8d39f !default;
$--button-primary-focus-gradient-end-color:#e8d39f !default;

$--button-danger-color: $--color-white !default;
$--button-danger-background-color: #e83d3d !default;
$--button-danger-border-color:#e83d3d !default;

$--button-text-color: $--color-primary !default;
$--button-text-active-color:  $--color-primary !default;

$--button-mini-padding-vertical: 8px !default;
$--button-mini-padding-horizontal: 27px !default;


$--button-small-padding-vertical:  12px!default;
$--button-small-padding-horizontal:  22px!default;


$--button-medium-font-size: $--size-font-mid !default;
$--button-medium-padding-vertical: 12px !default;
$--button-medium-padding-horizontal: 22px !default;



/* button
 ----------------------------*/

@include b(button) { 
  color: $--button-default-color;
  border-radius: $--button-default-border-raduis;

  &.el-button--mini {
    padding: $--button-mini-padding-vertical $--button-mini-padding-horizontal;
  }
  &.el-button--small {
    padding: $--button-small-padding-vertical $--button-small-padding-horizontal;
  }
  &.el-button--medium {
    font-size: $--button-medium-font-size;
    padding: $--button-medium-padding-vertical $--button-medium-padding-horizontal;
  }

  &.el-button--default {
    background-color: $--button-default-fill;
    border-color:  $--button-default-color;
    &:focus {
      color: $--color-primary ;
    }
    &:hover
    {
      color: $--color-white ;
      border-color: transparent;
      background-image:  linear-gradient($--button-deg, $--button-default-gradient-start-color, $--button-default-gradient-end-color);   
      background-origin: border-box;
    }
    &:active
    {
      background-image:  linear-gradient($--button-deg, $--button-default-gradient-start-color, $--button-default-gradient-start-color);   
    }
 
  }

  &.el-button--primary {
    color: $--button-primary-color;
    background-color: $--button-default-fill;
    border-color: transparent;
    background-origin: border-box;
    background-image:  linear-gradient($--button-deg, $--button-primary-gradient-start-color, $--button-primary-gradient-end-color);   
    &:hover {
      color: $--button-primary-color; 
      border-color: transparent;
      background-origin: border-box;
      background-image:  linear-gradient($--button-deg, $--button-primary-gradient-start-color, $--button-primary-gradient-end-color);   
    }

    &:active
    {
      background-image:  linear-gradient($--button-deg, $--button-primary-gradient-start-color, $--button-primary-gradient-start-color);   
    }

    &:visited 
    {
      background-image:  linear-gradient($--button-deg, $--button-primary-gradient-start-color, $--button-primary-gradient-end-color); 
      color: $--color-primary ;
    }
  }

  &.el-button--danger {
    color: $--button-danger-color;
    background-color: $--button-danger-background-color;
    border-color:  $--button-danger-border-color;
    &:focus
    {
      background-color: $--button-danger-background-color;
    }
  }

  &.el-button--text {
    color: $--button-text-color;
    &:focus, &:hover
    {
      color: $--button-text-active-color;
    }
  }

  &.el-button--text {
    padding-left: 0;
    padding-right: 0;
  }
  
}