$button-fab-width: rem(5.600) !default;
$icon-button-margin: rem(0.600) !default;

md-fab-toolbar {
  $icon-delay: 200ms;

  // Include the top/left/bottom/right fab positions
  @include fab-all-positions();

  display: block;

  /*
   * Closed styling
   */
  .md-fab-toolbar-wrapper {
    display: block;
    position: relative;
    overflow: hidden;

    // Account for the size of the trigger plus its margin/shadow
    height: $button-fab-width + ($icon-button-margin * 2);
  }

  md-fab-trigger {
    position: absolute;
    z-index: $z-index-fab;

    button {
      overflow: visible !important;
    }

    .md-fab-toolbar-background {
      display: block;
      position: absolute;
      z-index: $z-index-fab + 1;

      opacity: 1;
      transition: $swift-ease-in;
    }

    md-icon {
      position: relative;
      z-index: $z-index-fab + 2;

      opacity: 1;

      // Hide the icon very quickly
      transition: all $icon-delay ease-in;
    }
  }

  &.md-left {
    md-fab-trigger {
      @include rtl-prop(right, left, 0, auto);
    }

    .md-toolbar-tools {
      flex-direction: row-reverse;

      > .md-button:first-child {
        @include rtl-prop(margin-right, margin-left, 0.6rem, auto)
      }

      > .md-button:first-child {
        @include rtl-prop(margin-left, margin-right, -0.8rem, auto);
      }


      > .md-button:last-child {
        @include rtl-prop(margin-right, margin-left, 8px, auto);
      }

    }
  }

  &.md-right {
    md-fab-trigger {
      @include rtl-prop(left, right, 0, auto);
    }

    .md-toolbar-tools {
      flex-direction: row;
    }
  }

  md-toolbar {
    background-color: transparent !important;
    pointer-events: none;
    z-index: $z-index-fab + 3;

    .md-toolbar-tools {
      // Fix some spacing issues with the icons and the trigger
      padding: 0 20px;
      margin-top: 3px;
    }

    .md-fab-action-item {
      opacity: 0;
      transform: scale(0);
      transition: $swift-ease-in;

      // Cut the action item's animation time in half since we delay it in the JS
      transition-duration: $swift-ease-in-duration / 2;
    }
  }

  /*
   * Hover styling
   */
  &.md-is-open {
    md-fab-trigger > button {
      box-shadow: none;

      md-icon {
        opacity: 0;
      }
    }

    .md-fab-action-item {
      opacity: 1;
      transform: scale(1);
    }
  }
}