@import '../bootstrap'

.v-speed-dial
  position: relative

  &--absolute
    position: absolute

  &--fixed
    position: fixed

  &--fixed,
  &--absolute
    z-index: 4

    & > .v-btn--floating
      margin: 0

  &--top
    &:not(.v-speed-dial--absolute)
      top: $grid-gutters.lg

    &.v-speed-dial--absolute
      top: 50%
      transform: translateY(-50%)

  &--bottom
    &:not(.v-speed-dial--absolute)
      bottom: $grid-gutters.lg

    &.v-speed-dial--absolute
      bottom: 50%
      transform: translateY(50%)

  &--left
    left: $grid-gutters.lg

  &--right
    right: $grid-gutters.lg

  &--direction
    &-left,
    &-right
      .v-speed-dial__list
        height: 100%
        top: 0

    &-top,
    &-bottom
      .v-speed-dial__list
        left: 0
        width: 100%

    &-top
      .v-speed-dial__list
        flex-direction: column-reverse
        bottom: 100%

    &-right
      .v-speed-dial__list
        flex-direction: row
        left: 100%

    &-bottom
      .v-speed-dial__list
        flex-direction: column
        top: 100%

    &-left
      .v-speed-dial__list
        flex-direction: row-reverse
        right: 100%

/** Elements */
.v-speed-dial__list
  align-items: center
  display: flex
  justify-content: center
  position: absolute