/**
 * Fab
 *
 * A floating action button. Although it technically does not "float"
 * for our purposes, Fab is a primary action.
 *
 * http://www.google.com/design/spec/components/buttons.html#buttons-floating-action-button
 */

$col-fab-border         : 1px solid rgba(#000, 0.08) !default;
$col-fab-color          : #fff !default;
$col-fab-radius         : 50% !default;
$col-fab-size           : 36px !default;
$col-fab-secondary-size : 24px !default;
$col-fab-shadow         : 0 1px 3px 0 rgba(#000, 0.37), inset 0 1px 0 rgba(#fff, 0.2), inset 0 -1px 0 rgba(#fff, 0.1) !default;
$col-fab-transition     : 0.4s all !default;
$col-fab-background     : $col-primary !default;

.col-btn-fab {
  background: $col-fab-background;
  border-radius: $col-fab-radius;
  border: $col-fab-border;
  box-shadow: $col-fab-shadow;
  color: $col-fab-color;
  display: block;
  font-size: $col-fab-size * 0.5;
  font-weight: 500;
  line-height: 16px;
  height: $col-fab-size;
  margin: 0 auto;
  padding: (($col-fab-size - 16px) * 0.5) 0;
  position: relative;
  text-shadow: 0 1px 1px rgba(#000, 0.2);
  transition: $col-fab-transition;
  width: $col-fab-size;
  z-index: 1;

  &:before {
    border-radius: inherit;
    border: 2px solid transparent;
    bottom: unit(-1);
    content: "";
    left: unit(-1);
    position: absolute;
    right: unit(-1);
    top: unit(-1);
    transform: scale(0.7);
    transition: 0.3s all;
  }

  &:focus {
    outline: none;

    &:before {
      border-color: rgba(#000, 0.2);
      transform: scale(1);
    }

    &:active:before {
      box-shadow: inset 0 0 3px rgba(#000, 0.4);
      transform: scale(0.9);
    }
  }
}

// Fabs within blocks should appear smaller
.col-block .col-btn-fab {
  background: $col-secondary;
  border: none;
  color: rgba(#000, 0.54);
  font-size: 14px;
  font-weight: 600;
  line-height: unit(2);
  height: $col-fab-secondary-size;
  margin: (($col-fab-size - $col-fab-secondary-size) * 0.5) auto;
  padding: 0;
  text-align: center;
  text-shadow: 0 1px 1px #fff;
  transition: 0.7s all;
  width: $col-fab-secondary-size;

  &:hover,
  &:focus {
    color: rgba(#000, 0.54);
    transition: 0.3s all;
  }
}