code-lab/node_modules/vuetify/lib/components/VBtn/VBtn.sass

@use 'sass:math'
@use 'sass:map'
@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-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
        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%

    &--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

    &--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
    grid-area: prepend
    margin-inline: $button-margin-start $button-margin-end

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

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

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

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

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

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

      &__overlay
        transition: none

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