.mui-floating-action-button-ripple-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mui-floating-action-button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  &.mui-speed-dial-direction-up {
    flex-direction: column;
  }
}

.mui-speed-dial-buttons-container {
  opacity: 0.0;
  transition: opacity 200ms;
  &.mui-speed-dial-is-shown {
    opacity: 1.0;
  }
}
.mui-speed-dial-button {
  position: relative;
  margin-bottom: 7px;
}
.mui-floating-action-button {
  .mui-tooltip {
    &.mui-is-shown {
      top: auto;
      transform: none;
    }
  }

  color: white;
  display: inline-block;

  &, * { @include ease-out(); }

  .mui-floating-action-button-container {
    height: $floating-action-button-size;
    width: $floating-action-button-size;
    padding: 0;

    // TODO overflow should be hidden to contain the ripple, however, this will hide our tooltip.
    position: relative;
    //overflow: hidden;

    background-color: $floating-action-button-color;
    border-radius: 50%;
    text-align: center;
    vertical-align: bottom;

    // This is need so that ripples do not bleed past border radius.
    // See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
    transform: translate3d(0, 0, 0);

    &.mui-is-disabled {
      background-color: $floating-action-button-disabled-color;

      .mui-floating-action-button-icon {
        color: $floating-action-button-disabled-text-color;
      }

      &:hover {
        background-color: $floating-action-button-disabled-color;
      }
    }

    &:hover,
    &.mui-is-keyboard-focused {
      background-color: $floating-action-button-hover-color;
    }
  }

  .mui-floating-action-button-icon {
    line-height: $floating-action-button-size;
    color: $floating-action-button-icon-color;
    fill: $floating-action-button-icon-color;
  }

  .mui-touch-ripple {
    .mui-ripple-circle-inner {
      background-color: $floating-action-button-ripple-color;
    }
  }

  .mui-focus-ripple {
    .mui-focus-ripple-inner {
      background-color: $floating-action-button-focus-ripple-color
    }
  }

  &.mui-is-mini {
    .mui-floating-action-button-container {
      height: $floating-action-button-mini-size;
      width: $floating-action-button-mini-size;
    }

    .mui-floating-action-button-icon {
      line-height: $floating-action-button-mini-size;
    }
  }

  &.mui-is-secondary {

    .mui-floating-action-button-container {
      background-color: $floating-action-button-secondary-color;

      &:hover,
      &.mui-is-keyboard-focused {
        background-color: $floating-action-button-secondary-hover-color;
      }
    }

    .mui-floating-action-button-icon {
      color: $floating-action-button-secondary-icon-color;
    }

    .mui-touch-ripple {
      .mui-ripple-circle-inner {
        background-color: $floating-action-button-secondary-ripple-color;
      }
    }

    .mui-focus-ripple {
      .mui-focus-ripple-inner {
        background-color: $floating-action-button-secondary-focus-ripple-color;
      }
    }
  }
}