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

.v-btn
  align-items: center
  border-radius: $button-border-radius
  display: inline-grid
  grid-template-areas: "prepend content append"
  grid-template-columns: max-content auto max-content
  font-weight: $button-font-weight
  justify-content: center
  letter-spacing: $button-text-letter-spacing
  line-height: $button-line-height
  max-width: $button-max-width
  outline: none
  position: relative
  text-decoration: none
  text-indent: $button-text-letter-spacing
  text-transform: $button-text-transform
  transition-property: $button-transition-property
  transition-duration: 0.28s
  transition-timing-function: settings.$standard-easing
  user-select: none
  vertical-align: $button-vertical-align
  flex-shrink: 0

  @at-root
    @include button-sizes()
    @include button-density('height', $button-density)

  @include tools.border($button-border...)
  @include tools.position($button-positions)
  @include tools.states('.v-btn__overlay')
  @include tools.variant($button-variants...)

  @supports selector(:focus-visible)
    &::after
      @include tools.absolute(true)
      pointer-events: none
      border: 2px solid currentColor
      border-radius: inherit
      opacity: 0
      transition: opacity .2s ease-in-out

    &:focus-visible::after
      opacity: calc(.25 * var(--v-theme-overlay-multiplier))

  &--icon
    border-radius: $button-icon-border-radius
    min-width: 0
    padding: 0

    // ensure that default
    // v-icon size is 24px
    &.v-btn--size-default
      --v-btn-size: #{$button-icon-font-size}

    @at-root &
      @include button-density(('width', 'height'), $button-icon-density)

  &--elevated
    &:hover,
    &:focus
      +tools.elevation(map.get($button-elevation, 'hover'))

    &:active
      +tools.elevation(map.get($button-elevation, 'active'))

  &--flat
    box-shadow: none

  &--block
    display: flex
    flex: 1 0 auto
    min-width: 100%

  &--disabled
    pointer-events: none

    @if ($button-colored-disabled)
      opacity: $button-disabled-opacity
      &:hover
        opacity: $button-disabled-opacity
    @else
      opacity: 1
      &.v-btn
        // specificity has to be higher to override theme !important
        color: rgba(var(--v-theme-on-surface), $button-disabled-opacity) !important

    &.v-btn--variant-elevated,
    &.v-btn--variant-flat
      box-shadow: none

      @if ($button-colored-disabled)
        opacity: 1
        color: rgba(var(--v-theme-on-surface), $button-disabled-opacity)
        background: rgb(var(--v-theme-surface))
      @else
        background: rgb(var(--v-theme-surface)) !important

      .v-btn__overlay
        // __overlay uses currentColor, so we need to divide
        // by the text opacity to get the correct value
        opacity: math.div($button-disabled-overlay, $button-disabled-opacity)

  &--loading
    pointer-events: none

    .v-btn__content,
    .v-btn__prepend,
    .v-btn__append
      opacity: 0

  &--stacked
    grid-template-areas: "prepend" "content" "append"
    grid-template-columns: auto
    grid-template-rows: max-content max-content max-content
    justify-items: center
    align-content: center

    .v-btn__content
      flex-direction: column
      line-height: $button-stacked-line-height

    .v-btn__prepend,
    .v-btn__append,
    .v-btn__content > .v-icon--start,
    .v-btn__content > .v-icon--end
      margin-inline: 0

    .v-btn__prepend,
    .v-btn__content > .v-icon--start
      margin-bottom: $button-stacked-icon-margin

    .v-btn__append,
    .v-btn__content > .v-icon--end
      margin-top: $button-stacked-icon-margin

    @at-root
      @include button-sizes($button-stacked-sizes, true)
      @include button-density('height', $button-stacked-density)

  &--slim
    padding: $button-slim-padding

  &--rounded
    @include tools.rounded($button-rounded-border-radius)

    &.v-btn--icon
      @include tools.rounded($button-border-radius)

  .v-icon
    --v-icon-size-multiplier: #{calc(18/21)}

  &--icon
    .v-icon
      --v-icon-size-multiplier: 1

  &--stacked
    .v-icon
      --v-icon-size-multiplier: #{calc(24/21)}

.v-btn__loader
  align-items: center
  display: flex
  height: 100%
  justify-content: center
  left: 0
  position: absolute
  top: 0
  width: 100%

.v-btn__content,
.v-btn__prepend,
.v-btn__append
  align-items: center
  display: flex
  transition: $button-content-transition

.v-btn__prepend
  grid-area: prepend
  margin-inline: $button-margin-start $button-margin-end

.v-btn__append
  grid-area: append
  margin-inline: $button-margin-end $button-margin-start

.v-btn__content
  grid-area: content
  justify-content: center
  white-space: $button-white-space

  > .v-icon--start
    margin-inline: $button-margin-start $button-margin-end

  > .v-icon--end
    margin-inline: $button-margin-end $button-margin-start

  .v-btn--stacked &
    white-space: normal

.v-btn__overlay
  background-color: currentColor
  border-radius: inherit
  opacity: 0
  transition: opacity .2s ease-in-out

.v-btn__overlay,
.v-btn__underlay
  @include tools.absolute()
  pointer-events: none

// VCard
.v-btn
  ~ .v-btn:not(.v-btn-toggle .v-btn)
    .v-card-actions &
      margin-inline-start: $button-card-actions-margin

// VPagination
.v-btn
  .v-pagination &
    @include tools.rounded($button-pagination-border-radius)

  &--rounded
    .v-pagination &
      @include tools.rounded($button-pagination-rounded-border-radius)

  &__overlay
    transition: none

    .v-pagination__item--is-active &
      opacity: $button-pagination-active-overlay-opacity