@mixin button-variables-outline($color, $background, $border, $colorhover, $bghover, $borderhover ) {
    color: $color;
    border-width: 1px;
    border-style: solid;
    background-color: $background;
    border-color: $border;
    border-radius: 0px;
    text-transform: uppercase;
    font-family: $font-family-once;
    font-size: 12px;
    &:hover,
    &:focus,
    &:active,
    &.active {
    color: $colorhover;
    background-color: $bghover;
    border-color: $borderhover;
    }
    .open & {
    &.dropdown-toggle {
      color: $colorhover;
      background-color: $bghover;
      border-color: $borderhover ;
    }
    }
    &:active,
    &.active {
    background-image: none;
    }
    .open & {
    &.dropdown-toggle {
      background-image: none;
    }
    }
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: $background;
          border-color: $border;
    }
    }
    .badge {
    color: $background;
    background-color: $color;
    }
};

@mixin size($width,$height){
    width:$width ;
    height:$height;
};