.dig-floating-action-button {

  display: inline-block;

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

  .dig-floating-action-button-container {
    position: relative;
    height: $floating-action-button-size;
    width: $floating-action-button-size;
    padding: 0;
    overflow: hidden;
    background-color: $floating-action-button-color;
    border-radius: 50%;

    //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);

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

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

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

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

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

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

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

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

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

  &.dig-is-secondary {

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

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

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

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

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