@use './variables' as *

.v-empty-state
  align-items: center
  display: flex
  flex-direction: column
  justify-content: center
  min-height: $empty-state-min-height
  padding: $empty-state-padding

  &--start
    align-items: flex-start

  &--center
    align-items: center

  &--end
    align-items: flex-end

.v-empty-state__media
  text-align: center
  width: 100%

.v-empty-state__headline
  color: $empty-state-headline-color
  font-size: $empty-state-headline-font-size
  font-weight: $empty-state-headline-font-weight
  line-height: $empty-state-headline-line-height

.v-empty-state__title
  font-size: $empty-state-title-font-size
  font-weight: $empty-state-title-font-weight
  line-height: $empty-state-title-line-height
  text-align: center

.v-empty-state__text
  font-size: $empty-state-text-font-size
  font-weight: $empty-state-text-font-weight
  line-height: $empty-state-text-line-height
  padding: $empty-state-text-padding
  text-align: center

.v-empty-state__content
  padding: $empty-state-content-padding

.v-empty-state__actions
  display: flex
  gap: $empty-state-actions-gap
  padding: $empty-state-actions-padding

.v-empty-state__action-btn.v-btn
  background-color: $empty-state-actions-btn-background-color
  color: $empty-state-actions-btn-color