.z-fab
  z-index: $z-fab

.q-fab
  position: relative
  vertical-align: middle

  > .q-btn
    width: 100%

  &--form-rounded
    border-radius: $button-rounded-border-radius
  &--form-square
    border-radius: $generic-border-radius

  &__icon, &__active-icon
    transition: opacity .4s, transform .4s
  &__icon
    opacity: 1
    transform: rotate(0deg)
  &__active-icon
    opacity: 0
    transform: rotate(-180deg)

  &__label

    &--external
      position: absolute
      padding: 0 8px
      transition: opacity .18s cubic-bezier(.65,.815,.735,.395)

      &-hidden
        opacity: 0
        pointer-events: none

    &--external-left
      top: 50%
      left: -12px
      transform: translate(-100%, -50%)
    &--external-right
      top: 50%
      right: -12px
      transform: translate(100%, -50%)
    &--external-bottom
      bottom: -12px
      left: 50%
      transform: translate(-50%, 100%)
    &--external-top
      top: -12px
      left: 50%
      transform: translate(-50%, -100%)

    &--internal
      padding: 0
      transition: font-size .12s cubic-bezier(.65,.815,.735,.395), max-height .12s cubic-bezier(.65,.815,.735,.395), opacity .07s cubic-bezier(.65,.815,.735,.395)
      max-height: 30px

      &-hidden
        font-size: 0
        opacity: 0

      &-top
        padding-bottom: .12em
      &-bottom
        padding-top: .12em
      &-top, &-bottom
        &.q-fab__label--internal-hidden
          max-height: 0

      &-left
        padding-left: .285em
        padding-right: .571em
      &-right
        padding-right: .285em
        padding-left: .571em

  &__icon-holder
    min-width: $button-fab-icon-font-size
    min-height: $button-fab-icon-font-size
    position: relative

    &--opened
      .q-fab__icon
        transform: rotate(180deg)
        opacity: 0
      .q-fab__active-icon
        transform: rotate(0deg)
        opacity: 1

  &__actions
    position: absolute
    pointer-events: none
    align-items: center
    justify-content: center
    align-self: center
    padding: 3px

    .q-btn
      margin: 5px

    // a closed action is a disabled QBtn and .q-btn.disabled pins its
    // opacity with !important, so the fade has to go through filter
    > *
      filter: opacity(0)
      transform: scale(.4)
      transition: filter .18s ease-out, transform .18s ease-out

    // physical direction, not text-based: don't let rtlcss mirror it
    &--right
      height: 56px
      left: 100% #{"/* rtl:ignore */"}
      margin-left: 9px #{"/* rtl:ignore */"}
      flex-direction: row #{"/* rtl:row-reverse */"}

    &--left
      height: 56px
      right: 100% #{"/* rtl:ignore */"}
      margin-right: 9px #{"/* rtl:ignore */"}
      flex-direction: row-reverse #{"/* rtl:row */"}

    &--up
      width: 56px
      bottom: 100%
      margin-bottom: 9px
      flex-direction: column-reverse

    &--down
      width: 56px
      top: 100%
      margin-top: 9px
      flex-direction: column

    &--up, &--down
      left: 50%
      margin-left: -28px

    // DOM order runs outwards from the trigger in every direction, so the
    // cascade opens away from it and closes back towards it. Engines
    // without sibling-index() drop just this declaration and animate the
    // actions together.
    &--opened
      pointer-events: all

      > *
        filter: opacity(1)
        transform: scale(1)
        transition-delay: calc(var(--q-fab-stagger) * (sibling-index() - 1))

    &--closed > *
      transition-delay: calc(var(--q-fab-stagger) * (sibling-count() - sibling-index()))

  &--align-left
    > .q-fab__actions
      &--up, &--down
        align-items: flex-start
        left: 28px

  &--align-right
    > .q-fab__actions
      &--up, &--down
        align-items: flex-end
        left: auto
        right: 0