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

.stats-container
  display: flex
  flex-direction: column
  min-width: 16rem
  max-width: 100%
  border: 1px solid $light-gray
  background-color: var(--glass-bg)
  backdrop-filter: blur(8px)
  -webkit-backdrop-filter: blur(8px)
  border-radius: 1rem
  cursor: pointer
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease
  animation: 0.25s fadeIn ease-out
  flex: 1 1 15%
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
  position: relative
  contain: layout style
  overflow: hidden

.stats-container:hover
  border-color: $accent-primary
  transform: translateY(-4px)
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15)

.container-running
  border-color: $light-gray
  
  &:hover
    border-color: $light-gray

.stats-header
  color: $white
  font-size: 15pt
  font-weight: 600
  letter-spacing: -0.01em
  border-radius: 1rem 1rem 0 0
  padding: 1rem 0.75rem 0.75rem 1.25rem
  flex-shrink: 0

.stats-content
  display: flex
  padding-bottom: 1.25rem
  padding-left: 1.5rem
  height: 14rem
  max-height: 16rem
  padding-right: 1.5rem
  overflow: hidden

.container-center
  justify-content: center
  align-items: center

.container-small
  flex: 1 1 5%

.container-normal
  flex: 1 1 30%

.container-large
  flex: 1 1 35%

@media screen and (max-width: 900px)
  .stats-container
    min-width: 100%
    flex: 1 1 100%
  
  .stats-content
    height: auto
    min-height: 10rem
    max-height: none