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

@include tools.layer('components')
  .v-btn
    align-items: center
    border-radius: $button-border-radius
    display: inline-flex
    flex-direction: row
    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

    .v-locale--is-rtl &
      @if meta.type-of($button-text-letter-spacing) == 'number'
        text-indent: -1 * $button-text-letter-spacing

    @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
        pointer-events: none
        border: 2px solid currentColor
        border-radius: inherit
        opacity: 0
        transition: opacity .2s ease-in-out
        @include tools.absolute(true)

      &: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
        @include tools.elevation(map.get($button-elevation, 'hover'))

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

    &--flat
      box-shadow: none

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

    &--spaced
      .v-btn__content
        flex-grow: 1

      &.v-btn--spaced-start > .v-btn__content
        justify-content: end

      &.v-btn--spaced-end > .v-btn__content
        justify-content: start

    &--disabled
      pointer-events: none

      @if ($button-colored-disabled)
        opacity: $button-disabled-opacity
        &:hover
          opacity: $button-disabled-opacity
      @else
        opacity: 1
        @include tools.layer('trumps')
          color: tools.theme-color('on-surface', $button-disabled-opacity)

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

        @if ($button-colored-disabled)
          opacity: 1
          color: tools.theme-color('on-surface', $button-disabled-opacity)
          background: rgb(var(--v-theme-surface))
        @else
          @include tools.layer('trumps')
            background: rgb(var(--v-theme-surface))

        .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
      align-items: center
      flex-direction: column
      justify-content: center
      gap: $button-stacked-gap

      .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

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

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

    &--readonly
      pointer-events: none

    &--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--block
        min-width: 100%

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

    > .v-progress-circular
      width: $button-loader-size
      height: $button-loader-size

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

  .v-btn__prepend
    margin-inline: $button-margin-start $button-margin-end

    .v-btn--slim &
      margin-inline-start: 0

  .v-btn__append
    margin-inline: $button-margin-end $button-margin-start

    .v-btn--slim &
      margin-inline-end: 0

  .v-btn__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
    pointer-events: none
    @include tools.absolute()

  // VPagination
  .v-pagination
    .v-btn
      width: auto
      padding-inline: $button-pagination-padding-inline
      @include button-density('min-width', $button-icon-density)
      @include tools.rounded($button-pagination-border-radius)

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

      &__overlay
        transition: none

    &__prev,
    &__next
      .v-btn
        padding-inline: 0
        @include button-density('width', $button-icon-density)

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

  @media (forced-colors: active)
    .v-btn
      &:not(&--variant-text, &--variant-plain)
        border: thin solid

      &:focus-visible
        outline: 2px solid
        outline-offset: 2px