@use '../../styles/tools'
@use '../../styles/settings'
@use 'sass:math'
@use 'sass:map'
@use './variables' as *
@use './mixins' as *

.v-fab
  align-items: center
  display: inline-flex
  flex: 1 1 auto
  pointer-events: none
  position: relative
  transition-duration: $fab-transition-duration
  transition-timing-function: $fab-transition-timing-function
  vertical-align: middle

  .v-btn
    pointer-events: auto

    &--variant-elevated
      @include tools.elevation(3)

  &--app,
  &--absolute
    display: flex

  &--start,
  &--left
    justify-content: flex-start

  &--center
    align-items: center
    justify-content: center

  &--end,
  &--right
    justify-content: flex-end

  &--bottom
    align-items: flex-end

  &--top
    align-items: flex-start

  &--extended
    .v-btn
      // min-height: 56px
      // min-width: 80px
      border-radius: 9999px !important

.v-fab__container
  align-self: center
  display: inline-flex
  vertical-align: middle

  .v-fab--app &
    margin: 12px

  .v-fab--absolute &
    position: absolute
    z-index: 4

  .v-fab--offset.v-fab--top &
    transform: translateY(-50%)

  .v-fab--offset.v-fab--bottom &
    transform: translateY(50%)

  .v-fab--top &
    top: 0

  .v-fab--bottom &
    bottom: 0

  .v-fab--left &,
  .v-fab--start &
    left: 0

  .v-fab--right &,
  .v-fab--end &
    right: 0