@import "../../globals.core";

// FABulous Buttons (Floating Action Button from material)
// --------------------------------------------------

$button-fab-size:           56px !default;


.button-fab {
  position: absolute;
  width: $button-fab-size;
  height: $button-fab-size;
  line-height: $button-fab-size;
  min-width: 0;
  vertical-align: middle;

  border-radius: 50%;
  background-clip: padding-box;

  overflow: hidden;

  transition: .2s linear;
  transition-property: background-color;

  font-size: 14px;

  icon {
    flex: 1;
    font-size: 2.8rem;
  }

}

[fab-center] {
  left: 50%;
  margin-left: -$button-fab-size / 2;
}

[fab-top] {
  top: 16px;
}

[fab-right] {
  right: 16px;
}

[fab-bottom] {
  bottom: 16px;
}

[fab-left] {
  left: 16px;
}