@use "@/common/styles/colors" as *

.statistic-area
  width: 100%
  max-width: calc(100% - 2rem)
  padding-left: 20rem
  padding-right: 20rem
  padding-top: 1.5rem
  margin-bottom: 2rem
  display: flex
  gap: 2rem
  justify-content: space-between
  flex-wrap: wrap
  box-sizing: border-box

.statistic-stale
  opacity: 0.7
  transition: opacity 0.2s ease

.statistic-loading
  .skeleton-picker
    width: 280px
    height: 48px
    background: linear-gradient(90deg, $darker-gray 25%, $dark-gray 50%, $darker-gray 75%)
    background-size: 200% 100%
    border-radius: 0.6rem
    opacity: 0
    transform: translateY(10px)
    
    &.skeleton-visible
      animation: skeleton-shimmer 1.5s infinite, skeleton-fade-in 0.3s ease forwards
    
  .skeleton-chart
    flex: 1 1 30%
    min-width: 16rem
    height: 18rem
    background: linear-gradient(90deg, $darker-gray 25%, $dark-gray 50%, $darker-gray 75%)
    background-size: 200% 100%
    border-radius: 1rem
    border: 1px solid $light-gray
    opacity: 0
    transform: translateY(10px)
    
    &.skeleton-visible
      animation: skeleton-shimmer 1.5s infinite, skeleton-fade-in 0.3s ease forwards

@keyframes skeleton-shimmer
  0%
    background-position: 200% 0
  100%
    background-position: -200% 0

@keyframes skeleton-fade-in
  0%
    opacity: 0
    transform: translateY(10px)
  100%
    opacity: 1
    transform: translateY(0)

.statistics-header
  width: 100%
  display: flex
  align-items: center
  justify-content: space-between
  gap: 1rem
  margin-bottom: 0.5rem
  min-width: 0

  > .date-range-picker
    flex: 1 1 auto
    min-width: 0

  > .export-button-container
    flex: 0 0 auto

.statistics-empty
  width: 100%
  display: flex
  align-items: center
  justify-content: center
  padding: 6rem 2rem
  
  p
    font-size: 1.1rem
    font-weight: 500
    color: $subtext
    text-align: center

@media screen and (max-width: 1472px)
  .statistic-area
    padding-left: 10rem
    padding-right: 10rem

@media screen and (max-width: 600px)
  .statistics-header
    gap: 0.5rem

@media screen and (max-width: 425px)
  .statistic-area
    padding-left: 3rem
    padding-right: 3rem

@media screen and (max-width: 375px)
  .statistic-area
    padding-left: 1rem
    padding-right: 1rem