pixies

1@use "@/common/styles/colors" as *
2
3.btn
4  display: inline-flex
5  align-items: center
6  justify-content: center
7  gap: 0.5rem
8  font-family: inherit
9  font-weight: 600
10  border: none
11  border-radius: 8px
12  cursor: pointer
13  transition: all 0.2s ease
14  white-space: nowrap
15
16  &:disabled
17    opacity: 0.5
18    cursor: not-allowed
19
20  svg
21    font-size: 1em
22
23.btn-sm
24  padding: 0.5rem 1rem
25  font-size: 0.875rem
26
27.btn-md
28  padding: 0.75rem 1.5rem
29  font-size: 0.9375rem
30
31.btn-lg
32  padding: 1rem 2rem
33  font-size: 1rem
34
35.btn-filled
36  &.btn-primary
37    background: $primary
38    color: $background
39
40    &:hover:not(:disabled)
41      background: $primary-light
42      transform: translateY(-1px)
43
44    &:active:not(:disabled)
45      transform: translateY(0)
46
47  &.btn-blue
48    background: $blue
49    color: white
50
51    &:hover:not(:disabled)
52      background: $blue-light
53      transform: translateY(-1px)
54
55  &.btn-red
56    background: $red
57    color: white
58
59    &:hover:not(:disabled)
60      background: $red-light
61      transform: translateY(-1px)
62
63  &.btn-green
64    background: $primary
65    color: $background
66
67    &:hover:not(:disabled)
68      background: $primary-light
69      transform: translateY(-1px)
70
71.btn-outline
72  background: transparent
73
74  &.btn-primary
75    border: 1px solid $primary
76    color: $primary
77
78    &:hover:not(:disabled)
79      background: rgba($primary, 0.1)
80
81  &.btn-blue
82    border: 1px solid $blue
83    color: $blue
84
85    &:hover:not(:disabled)
86      background: rgba($blue, 0.1)
87
88  &.btn-red
89    border: 1px solid $red
90    color: $red
91
92    &:hover:not(:disabled)
93      background: rgba($red, 0.1)
94
95  &.btn-green
96    border: 1px solid $primary
97    color: $primary
98
99    &:hover:not(:disabled)
100      background: rgba($primary, 0.1)
101
102.btn-ghost
103  background: transparent
104  border: none
105
106  &.btn-primary
107    color: $primary
108
109    &:hover:not(:disabled)
110      background: rgba($primary, 0.1)
111
112  &.btn-blue
113    color: $blue
114
115    &:hover:not(:disabled)
116      background: rgba($blue, 0.1)