sposchedule

1
export default {
2
  root: {
3
    class: [
4
      // Flex & Alignment
5
      'flex items-center justify-center flex-wrap',
6

7
      // Spacing
8
      'px-4 py-2',
9

10
      // Shape
11
      'border-0 rounded-md',
12

13
      // Color
14
      'bg-surface-0 dark:bg-surface-900',
15
      'text-surface-500 dark:text-white/60',
16
    ],
17
  },
18
  first: ({ context }) => ({
19
    class: [
20
      'relative',
21

22
      // Flex & Alignment
23
      'inline-flex items-center justify-center',
24

25
      // Shape
26
      'border-0 rounded-full',
27

28
      // Size
29
      'min-w-[2.5rem] h-10 m-[0.143rem]',
30
      'leading-none',
31

32
      // Color
33
      'text-surface-500 dark:text-white/60',
34

35
      // State
36
      {
37
        'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]':
38
          !context.disabled,
39
        'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400':
40
          !context.disabled,
41
      },
42

43
      // Transition
44
      'transition duration-200',
45

46
      // Misc
47
      'user-none overflow-hidden',
48
      { 'cursor-default pointer-events-none opacity-60': context.disabled },
49
    ],
50
  }),
51
  prev: ({ context }) => ({
52
    class: [
53
      'relative',
54

55
      // Flex & Alignment
56
      'inline-flex items-center justify-center',
57

58
      // Shape
59
      'border-0 rounded-full',
60

61
      // Size
62
      'min-w-[2.5rem] h-10 m-[0.143rem]',
63
      'leading-none',
64

65
      // Color
66
      'text-surface-500 dark:text-white/60',
67

68
      // State
69
      {
70
        'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]':
71
          !context.disabled,
72
        'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400':
73
          !context.disabled,
74
      },
75

76
      // Transition
77
      'transition duration-200',
78

79
      // Misc
80
      'user-none overflow-hidden',
81
      { 'cursor-default pointer-events-none opacity-60': context.disabled },
82
    ],
83
  }),
84
  next: ({ context }) => ({
85
    class: [
86
      'relative',
87

88
      // Flex & Alignment
89
      'inline-flex items-center justify-center',
90

91
      // Shape
92
      'border-0 rounded-full',
93

94
      // Size
95
      'min-w-[2.5rem] h-10 m-[0.143rem]',
96
      'leading-none',
97

98
      // Color
99
      'text-surface-500 dark:text-white/60',
100

101
      // State
102
      {
103
        'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]':
104
          !context.disabled,
105
        'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400':
106
          !context.disabled,
107
      },
108

109
      // Transition
110
      'transition duration-200',
111

112
      // Misc
113
      'user-none overflow-hidden',
114
      { 'cursor-default pointer-events-none opacity-60': context.disabled },
115
    ],
116
  }),
117
  last: ({ context }) => ({
118
    class: [
119
      'relative',
120

121
      // Flex & Alignment
122
      'inline-flex items-center justify-center',
123

124
      // Shape
125
      'border-0 rounded-full',
126

127
      // Size
128
      'min-w-[2.5rem] h-10 m-[0.143rem]',
129
      'leading-none',
130

131
      // Color
132
      'text-surface-500 dark:text-white/60',
133

134
      // State
135
      {
136
        'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]':
137
          !context.disabled,
138
        'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400':
139
          !context.disabled,
140
      },
141

142
      // Transition
143
      'transition duration-200',
144

145
      // Misc
146
      'user-none overflow-hidden',
147
      { 'cursor-default pointer-events-none opacity-60': context.disabled },
148
    ],
149
  }),
150
  page: ({ context }) => ({
151
    class: [
152
      'relative',
153

154
      // Flex & Alignment
155
      'inline-flex items-center justify-center',
156

157
      // Shape
158
      'border-0 rounded-full',
159

160
      // Size
161
      'min-w-[2.5rem] h-10 m-[0.143rem]',
162
      'leading-none',
163

164
      // Color
165
      {
166
        'bg-highlight text-highlight-contrast border-highlight text-highlight-contrast hover:bg-highlight-emphasis ':
167
          context.active,
168
        'text-surface-500 dark:text-white/60': !context.active,
169
      },
170

171
      // State
172
      {
173
        'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]':
174
          !context.disabled && !context.active,
175
        'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400':
176
          !context.disabled,
177
      },
178

179
      // Transition
180
      'transition duration-200',
181

182
      // Misc
183
      'user-none overflow-hidden',
184
      { 'cursor-default pointer-events-none opacity-60': context.disabled },
185
    ],
186
  }),
187
  contentStart: 'mr-auto',
188
  contentEnd: 'ml-auto',
189
};
190