1input[type="text"],
2input[type="password"],
3input[type="email"],
4input[type="url"],
5input[type="date"],
6input[type="month"],
7input[type="time"],
8input[type="datetime"],
9input[type="datetime-local"],
10input[type="week"],
11input[type="number"],
12input[type="search"],
13input[type="tel"],
14select,
15textarea {
16    background: $bg-light-well;
17    background-clip: padding-box;
18    border: $border-width solid $bg-light-well;
19    border-bottom: $border-ui;
20    border-radius: $br;
21    color: $text-ui;
22    display: inline-block;
23    width: 100%;
24    padding: $sm-pad $md-pad;
25    line-height: 1.5;
26    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
27    font-family: $font-family;
28    font-size: $font-size-ui;
29    margin-right: $sm-pad;
30}
31
32.dark input[type="text"],
33.dark input[type="password"],
34.dark input[type="email"],
35.dark input[type="url"],
36.dark input[type="date"],
37.dark input[type="month"],
38.dark input[type="time"],
39.dark input[type="datetime"],
40.dark input[type="datetime-local"],
41.dark input[type="week"],
42.dark input[type="number"],
43.dark input[type="search"],
44.dark input[type="tel"],
45.dark select,
46.dark textarea {
47    background: $bg-dark-well;
48    border: $border-width solid transparent;
49    border-bottom: $border-width solid $text-light;
50    color: $text-light;
51}
52
53input[type="color"],
54{
55    background: $white;
56    border: $border;
57    border-radius: $br;
58    display: inline-block;
59    vertical-align: middle;
60}
61
62input:not([type]) {
63    -webkit-appearance: none;
64    background: $bg-light-well;
65    background-clip: padding-box;
66    border: $border;
67    border-radius: $br;
68    color: $text-default;
69    display: block;
70    width: 100%;
71    padding: $sm-pad $md-pad;
72    line-height: 1.5;
73    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
74    text-align: left;
75}
76
77input[type="text"]:focus,
78input[type="password"]:focus,
79input[type="email"]:focus,
80input[type="url"]:focus,
81input[type="date"]:focus,
82input[type="month"]:focus,
83input[type="time"]:focus,
84input[type="datetime"]:focus,
85input[type="datetime-local"]:focus,
86input[type="week"]:focus,
87input[type="number"]:focus,
88input[type="search"]:focus,
89input[type="tel"]:focus,
90input[type="color"]:focus,
91select:focus,
92textarea:focus {
93    background-color: #fff;
94    border-color: mix($primary, #fff);
95    outline: 0;
96    box-shadow: 0 0 0 0.2rem fade_out($primary, 0.75);
97}
98
99.dark input[type="text"]:focus,
100.dark input[type="password"]:focus,
101.dark input[type="email"]:focus,
102.dark input[type="url"]:focus,
103.dark input[type="date"]:focus,
104.dark input[type="month"]:focus,
105.dark input[type="time"]:focus,
106.dark input[type="datetime"]:focus,
107.dark input[type="datetime-local"]:focus,
108.dark input[type="week"]:focus,
109.dark input[type="number"]:focus,
110.dark input[type="search"]:focus,
111.dark input[type="tel"]:focus,
112.dark input[type="color"]:focus,
113.dark select:focus,
114.dark textarea:focus {
115    color: $text-light;
116    background-color: $bg-dark-well-active;
117}
118
119input:not([type]):focus {
120    background-color: #fff;
121    border-color: mix($primary, #fff);
122    outline: 0;
123    box-shadow: 0 0 0 0.2rem fade_out($primary, 0.75);
124}
125
126input[type="file"]:focus,
127input[type="radio"]:focus,
128input[type="checkbox"]:focus {
129    outline: 1px thin $dividers;
130}
131
132input[type="text"][disabled],
133input[type="password"][disabled],
134input[type="email"][disabled],
135input[type="url"][disabled],
136input[type="date"][disabled],
137input[type="month"][disabled],
138input[type="time"][disabled],
139input[type="datetime"][disabled],
140input[type="datetime-local"][disabled],
141input[type="week"][disabled],
142input[type="number"][disabled],
143input[type="search"][disabled],
144input[type="tel"][disabled],
145input[type="color"][disabled],
146select[disabled],
147textarea[disabled] {
148    background-color: $dividers;
149    color: $text-ui;
150    cursor: not-allowed;
151    opacity: 1;
152}
153
154input:not([type])[disabled] {
155    background-color: $dividers;
156    color: $text-ui;
157    cursor: not-allowed;
158    opacity: 1;
159}
160
161input[readonly],
162select[readonly],
163textarea[readonly] {
164    border-color: $dividers;
165    color: $text-ui;
166}
167
168input:focus:invalid,
169textarea:focus:invalid,
170select:focus:invalid {
171    border-color: darken($red, 10);
172    color: $red;
173}
174
175input[type="file"]:focus:invalid:focus,
176input[type="radio"]:focus:invalid:focus,
177input[type="checkbox"]:focus:invalid:focus {
178    outline-color: $red;
179}
180
181select {
182    border: $border;
183    vertical-align: sub;
184}
185
186select:not([size]):not([multiple]) {
187    height: calc(40px);
188}
189
190select[multiple] {
191    height: auto;
192}
193
194label {
195    display: inline-block;
196    line-height: 2;
197    color: $text-ui;
198    font-size: $font-size-ui;
199}
200
201fieldset {
202    border: 0;
203    margin: 0;
204    padding: $sm-pad 0;
205}
206
207fieldset li {
208    list-style: none;
209}
210
211legend {
212    border-bottom: $border;
213    color: $text-default;
214    display: block;
215    margin-bottom: $sm-pad;
216    padding: $sm-pad 0;
217    width: 100%;
218}
219
220textarea {
221    overflow: auto;
222    resize: vertical;
223}
224
225input[type=checkbox],
226input[type=radio] {
227    box-sizing: border-box;
228    padding: 0;
229    display: inline;
230}
231