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

@include tools.layer('components')
  .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
    position: absolute
    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