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

@include tools.layer('components')
  .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

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

    &--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
    gap: $card-actions-gap

  .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,
    &__append
      align-items: center
      display: flex

    &__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
    opacity: $card-text-opacity
    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

    @media (forced-colors: active)
      .v-progress-linear
        border: none

  .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

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