@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($fab-elevation)

        &:hover
          @include tools.elevation($fab-hover-elevation)

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

    &--absolute
      position: absolute
      inset: 0

    &--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
      @include tools.layer('overrides')
        .v-btn
          // min-height: 56px
          // min-width: 80px
          border-radius: 9999px

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

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

    .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