// sws mixins

@import "./fx-mixins.scss";

@mixin btn-floating($color: white, $bg-color:blue, $disabled-color:black, $disabled-bg-color:black, $hover-color:$color, $hover-bg-color:$bg-color) {
    // padding: 5px;
    border-radius: 50%;
    z-index: 2;
    width: 36px;
    height: 36px;
    // line-height: 36px;
    padding: 6px;
    border: 5px;
    // border-color: white;

  transition: .3s;
  position: relative;
  overflow: hidden;

  vertical-align: middle;

  cursor: pointer;

    display: inline-block;
    color: $color;
    background-color: $bg-color;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16);
    // box-shadow: 2px 2px 0px #888888;

    &:hover{
      box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.12);
      color: $hover-color;
      background-color: $hover-bg-color;
    }

    &[disabled] {
      color: $disabled-color;
      background-color: $disabled-bg-color;
      opacity: 1;
    }
}


@mixin btn-floating2($color: white, $bg-color:blue, $disabled-color:black, $hover-color:white) {
  display: inline-block;
  color: $color;
  position: relative;
  overflow: hidden;
  z-index: 2;
  width: 37px;
  height: 37px;
  line-height: 37px;
  padding: 0;
  background-color: $bg-color;
  @include fx-border-radius(50%);
box-shadow: 2px 2px 2px #888888;

  transition: .3s;
  cursor: pointer;
  vertical-align: middle;
  // margin: 10px;
  border: 0px;

    &:hover{
      color: $hover-color;
    }

    &[disabled] {
    //   color: $disabled-color;
      background-color: $disabled-color;
      opacity: 1;
    }
}


// used for bootstrap override
@mixin form-control-focus($color: $input-border-focus) {
  $color-rgba: rgba(red($color), green($color), blue($color), .6);
  &:focus {
    border-color: $color;
    outline: 0;

    @include box-shadow(1px, 1px, 4px, $color-rgba, false);
  }
}
@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
  @if $inset {
    -webkit-box-shadow:inset $top $left $blur $color;
    -moz-box-shadow:inset $top $left $blur $color;
    box-shadow:inset $top $left $blur $color;
  } @else {
    -webkit-box-shadow: $top $left $blur $color;
    -moz-box-shadow: $top $left $blur $color;
    box-shadow: $top $left $blur $color;
  }
}