@use '../../styles/tools'
@use './variables' as *
@use './mixins' as *

.v-card
  display: block
  overflow: hidden
  overflow-wrap: $card-overflow-wrap
  position: relative
  padding: $card-padding
  text-decoration: none
  transition-duration: $card-transition-duration
  transition-property: $card-transition-property
  transition-timing-function: $card-transition-timing-function
  z-index: 0

  @include tools.border($card-border...)
  @include tools.position($card-positions)
  @include tools.rounded($card-border-radius)
  @include tools.states('.v-card__overlay')
  @include tools.variant($card-variants...)

  &--disabled
    pointer-events: none
    user-select: none

    >:not(.v-card__loader)
      opacity: $card-disabled-opacity

  &--flat
    box-shadow: none

  &--hover
    cursor: pointer

    &::before,
    &::after
      border-radius: inherit
      bottom: 0
      content: ''
      display: block
      left: 0
      pointer-events: none
      position: absolute
      right: 0
      top: 0
      transition: inherit

    &::before
      opacity: 1
      z-index: -1

      @include tools.elevation($card-elevation)

    &::after
      z-index: 1
      opacity: 0

      @include tools.elevation($card-hover-elevation)

    &:hover::after
      opacity: 1

    &:hover::before
      opacity: 0

    @include tools.elevation(0)

  &--link
    cursor: pointer

.v-card-actions
  align-items: center
  display: flex
  flex: $card-actions-flex
  min-height: $card-actions-min-height
  padding: $card-actions-padding

.v-card-item
  align-items: $card-item-align-items
  display: grid
  flex: $card-header-flex
  grid-template-areas: "prepend content append"
  grid-template-columns: max-content auto max-content
  padding: $card-item-padding

  + .v-card-text
    padding-top: 0

  &__prepend
    grid-area: prepend
    padding-inline-end: $card-prepend-padding-inline-end

  &__append
    grid-area: append
    padding-inline-start: $card-append-padding-inline-start

.v-card-item__content
  align-self: center
  grid-area: content
  overflow: hidden

.v-card-title
  display: block
  flex: $card-title-flex
  font-size: $card-title-font-size
  font-weight: $card-title-font-weight
  hyphens: $card-title-hyphens
  letter-spacing: $card-title-letter-spacing
  min-width: 0
  overflow-wrap: $card-title-overflow-wrap
  overflow: $card-title-overflow
  padding: $card-title-padding
  text-overflow: $card-title-text-overflow
  text-transform: $card-title-text-transform
  white-space: $card-title-white-space
  word-break: $card-title-word-break
  word-wrap: $card-title-word-wrap

  @include card-line-height-densities($card-title-densities)

  .v-card-item &
    padding: $card-title-header-padding

  + .v-card-text,
  + .v-card-actions
    padding-top: 0

.v-card-subtitle
  display: block
  flex: $card-subtitle-flex
  font-size: $card-subtitle-font-size
  font-weight: $card-subtitle-font-weight
  letter-spacing: $card-subtitle-letter-spacing
  opacity: $card-subtitle-opacity
  overflow: $card-subtitle-overflow
  padding: $card-subtitle-padding
  text-overflow: $card-subtitle-text-overflow
  text-transform: $card-subtitle-text-transform
  white-space: $card-subtitle-white-space

  @include card-line-height-densities($card-subtitle-density-line-height)

  .v-card-item &
    padding: $card-subtitle-header-padding

.v-card-text
  flex: $card-text-flex
  font-size: $card-text-font-size
  font-weight: $card-text-font-weight
  letter-spacing: $card-text-letter-spacing
  padding: $card-text-padding
  text-transform: $card-text-text-transform

  @include card-line-height-densities($card-text-density-line-height)

.v-card__image
  display: flex
  height: 100%
  flex: $card-img-flex
  left: 0
  overflow: hidden
  position: absolute
  top: 0
  width: 100%
  z-index: -1

.v-card__content
  border-radius: inherit
  overflow: hidden
  position: relative

.v-card__loader
  bottom: $card-loader-bottom
  top: $card-loader-top
  left: 0
  position: absolute
  right: 0
  width: 100%
  z-index: 1

.v-card__overlay
  background-color: currentColor
  border-radius: inherit
  position: absolute
  top: 0
  right: 0
  bottom: 0
  left: 0
  pointer-events: none
  opacity: 0
  transition: opacity 0.2s ease-in-out