pixies

1@use "@/common/styles/colors" as *
2
3.chart-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 30%
17  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1)
18  contain: layout style
19  overflow: hidden
20
21  &:hover
22    border-color: $accent-primary
23    transform: translateY(-4px)
24    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15)
25
26.chart-header
27  display: flex
28  justify-content: space-between
29  align-items: center
30  padding: 1rem 1.25rem 0.75rem 1.25rem
31  flex-shrink: 0
32
33.chart-title
34  color: $white
35  font-size: 15pt
36  font-weight: 600
37  margin: 0
38  letter-spacing: -0.01em
39
40.chart-body
41  flex: 1 1 auto
42  min-height: 14rem
43  max-height: 20rem
44  padding: 0 1.25rem 1.25rem 1.25rem
45  position: relative
46  overflow: hidden
47
48  canvas
49    max-width: 100% !important
50    max-height: 100% !important
51
52@media screen and (max-width: 900px)
53  .chart-container
54    min-width: 100%
55    max-width: 100%
56    flex: 1 1 100%
57
58  .chart-body
59    min-height: 12rem
60    max-height: 16rem
61
62@media screen and (max-width: 500px)
63  .chart-container
64    padding: 0.5rem
65    border-radius: 0.75rem
66
67  .chart-body
68    min-height: 10rem
69    max-height: 14rem
70