pixies

1@use "@/common/styles/colors" as *
2
3.stats-container
4  display: flex
5  flex-direction: column
6  min-width: 16rem
7  max-width: 100%
8  border: 1px solid $light-gray
9  background-color: var(--glass-bg)
10  backdrop-filter: blur(8px)
11  -webkit-backdrop-filter: blur(8px)
12  border-radius: 1rem
13  cursor: pointer
14  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease
15  animation: 0.25s fadeIn ease-out
16  flex: 1 1 15%
17  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
18  position: relative
19  contain: layout style
20  overflow: hidden
21
22.stats-container:hover
23  border-color: $accent-primary
24  transform: translateY(-4px)
25  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15)
26
27.container-running
28  border-color: $light-gray
29  
30  &:hover
31    border-color: $light-gray
32
33.stats-header
34  color: $white
35  font-size: 15pt
36  font-weight: 600
37  letter-spacing: -0.01em
38  border-radius: 1rem 1rem 0 0
39  padding: 1rem 0.75rem 0.75rem 1.25rem
40  flex-shrink: 0
41
42.stats-content
43  display: flex
44  padding-bottom: 1.25rem
45  padding-left: 1.5rem
46  height: 14rem
47  max-height: 16rem
48  padding-right: 1.5rem
49  overflow: hidden
50
51.container-center
52  justify-content: center
53  align-items: center
54
55.container-small
56  flex: 1 1 5%
57
58.container-normal
59  flex: 1 1 30%
60
61.container-large
62  flex: 1 1 35%
63
64@media screen and (max-width: 900px)
65  .stats-container
66    min-width: 100%
67    flex: 1 1 100%
68  
69  .stats-content
70    height: auto
71    min-height: 10rem
72    max-height: none