@import "./fab-button.vars";

// Floating Action Buttons
// --------------------------------------------------

.fab-button {
  @include text-align(center);
  @include appearance(none);
  @include border-radius(50%);

  position: relative;
  z-index: 0;
  display: block;
  overflow: hidden;

  width: $fab-size;
  height: $fab-size;

  border: 0;

  font-size: 14px;
  line-height: $fab-size;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color, opacity 100ms linear;

  background-clip: padding-box;
  font-kerning: none;
  user-select: none;

  contain: strict;

  &:active,
  &:focus {
    outline: none;
  }
}

.fab-button ion-icon {
  font-size: 24px;
  line-height: 1;
}

.fab-button-inner {
  display: flex;

  flex-flow: row nowrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  transition: all ease-in-out 300ms;
  transition-property: transform, opacity;
}


// FAB Mini
// --------------------------------------------------

ion-fab-button[mini] .fab-button {
  @include margin(($fab-size - $fab-mini-size) / 2);

  width: $fab-mini-size;
  height: $fab-mini-size;

  line-height: $fab-mini-size;
}

// FAB Close Icon
// --------------------------------------------------

.fab-button-close-icon {
  @include position(0, 0, null, 0);

  position: absolute;

  display: flex;

  height: 100%;

  opacity: 0;
  transform: scale(.4) rotateZ(-45deg);
  transition: all ease-in-out 300ms;
  transition-property: transform, opacity;
}

.fab-button-close-icon .icon-inner {
  @include margin(auto);
}

// FAB Animation
// --------------------------------------------------

.fab-button-close-active .fab-button-close-icon {
  opacity: 1;
  transform: scale(1) rotateZ(0deg);
}

.fab-button-close-active .fab-button-inner {
  opacity: 0;
  transform: scale(.4) rotateZ(45deg);
}
