1.continue-application {
2  --color: #fff;
3  --background: #404660;
4  --background-hover: #3A4059;
5  --background-left: #2B3044;
6  --folder: #F3E9CB;
7  --folder-inner: #BEB393;
8  --paper: #FFFFFF;
9  --paper-lines: #BBC1E1;
10  --paper-behind: #E1E6F9;
11  --pencil-cap: #fff;
12  --pencil-top: #275EFE;
13  --pencil-middle: #fff;
14  --pencil-bottom: #5C86FF;
15  --shadow: rgba(13, 15, 25, .2);
16  border: none;
17  outline: none;
18  cursor: pointer;
19  position: relative;
20  border-radius: 5px;
21  font-size: 14px;
22  font-weight: 500;
23  line-height: 19px;
24  -webkit-appearance: none;
25  -webkit-tap-highlight-color: transparent;
26  padding: 17px 29px 17px 69px;
27  transition: background 0.3s;
28  color: var(--color);
29  background: var(--bg, var(--background));
30}
31
32.continue-application > div {
33  top: 0;
34  left: 0;
35  bottom: 0;
36  width: 53px;
37  position: absolute;
38  overflow: hidden;
39  border-radius: 5px 0 0 5px;
40  background: var(--background-left);
41}
42
43.continue-application > div .folder {
44  width: 23px;
45  height: 27px;
46  position: absolute;
47  left: 15px;
48  top: 13px;
49}
50
51.continue-application > div .folder .top {
52  left: 0;
53  top: 0;
54  z-index: 2;
55  position: absolute;
56  transform: translateX(var(--fx, 0));
57  transition: transform 0.4s ease var(--fd, 0.3s);
58}
59
60.continue-application > div .folder .top svg {
61  width: 24px;
62  height: 27px;
63  display: block;
64  fill: var(--folder);
65  transform-origin: 0 50%;
66  transition: transform 0.3s ease var(--fds, 0.45s);
67  transform: perspective(120px) rotateY(var(--fr, 0deg));
68}
69
70.continue-application > div .folder:before, .continue-application > div .folder:after,
71.continue-application > div .folder .paper {
72  content: "";
73  position: absolute;
74  left: var(--l, 0);
75  top: var(--t, 0);
76  width: var(--w, 100%);
77  height: var(--h, 100%);
78  border-radius: 1px;
79  background: var(--b, var(--folder-inner));
80}
81
82.continue-application > div .folder:before {
83  box-shadow: 0 1.5px 3px var(--shadow), 0 2.5px 5px var(--shadow), 0 3.5px 7px var(--shadow);
84  transform: translateX(var(--fx, 0));
85  transition: transform 0.4s ease var(--fd, 0.3s);
86}
87
88.continue-application > div .folder:after,
89.continue-application > div .folder .paper {
90  --l: 1px;
91  --t: 1px;
92  --w: 21px;
93  --h: 25px;
94  --b: var(--paper-behind);
95}
96
97.continue-application > div .folder:after {
98  transform: translate(var(--pbx, 0), var(--pby, 0));
99  transition: transform 0.4s ease var(--pbd, 0s);
100}
101
102.continue-application > div .folder .paper {
103  z-index: 1;
104  --b: var(--paper);
105}
106
107.continue-application > div .folder .paper:before, .continue-application > div .folder .paper:after {
108  content: "";
109  width: var(--wp, 14px);
110  height: 2px;
111  border-radius: 1px;
112  transform: scaleY(0.5);
113  left: 3px;
114  top: var(--tp, 3px);
115  position: absolute;
116  background: var(--paper-lines);
117  box-shadow: 0 12px 0 0 var(--paper-lines), 0 24px 0 0 var(--paper-lines);
118}
119
120.continue-application > div .folder .paper:after {
121  --tp: 6px;
122  --wp: 10px;
123}
124
125.continue-application > div .pencil {
126  height: 2px;
127  width: 3px;
128  border-radius: 1px 1px 0 0;
129  top: 8px;
130  left: 105%;
131  position: absolute;
132  z-index: 3;
133  transform-origin: 50% 19px;
134  background: var(--pencil-cap);
135  transform: translateX(var(--pex, 0)) rotate(35deg);
136  transition: transform 0.4s ease var(--pbd, 0s);
137}
138
139.continue-application > div .pencil:before, .continue-application > div .pencil:after {
140  content: "";
141  position: absolute;
142  display: block;
143  background: var(--b, linear-gradient(var(--pencil-top) 55%, var(--pencil-middle) 55.1%, var(--pencil-middle) 60%, var(--pencil-bottom) 60.1%));
144  width: var(--w, 5px);
145  height: var(--h, 20px);
146  border-radius: var(--br, 2px 2px 0 0);
147  top: var(--t, 2px);
148  left: var(--l, -1px);
149}
150
151.continue-application > div .pencil:before {
152  -webkit-clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
153  clip-path: polygon(0 5%, 5px 5%, 5px 17px, 50% 20px, 0 17px);
154}
155
156.continue-application > div .pencil:after {
157  --b: none;
158  --w: 3px;
159  --h: 6px;
160  --br: 0 2px 1px 0;
161  --t: 3px;
162  --l: 3px;
163  border-top: 1px solid var(--pencil-top);
164  border-right: 1px solid var(--pencil-top);
165}
166
167.continue-application:before, .continue-application:after {
168  content: "";
169  position: absolute;
170  width: 10px;
171  height: 2px;
172  border-radius: 1px;
173  background: var(--color);
174  transform-origin: 9px 1px;
175  transform: translateX(var(--cx, 0)) scale(0.5) rotate(var(--r, -45deg));
176  top: 26px;
177  right: 16px;
178  transition: transform 0.3s;
179}
180
181.continue-application:after {
182  --r: 45deg;
183}
184
185.continue-application:hover {
186  --cx: 2px;
187  --bg: var(--background-hover);
188  --fx: -40px;
189  --fr: -60deg;
190  --fd: .15s;
191  --fds: 0s;
192  --pbx: 3px;
193  --pby: -3px;
194  --pbd: .15s;
195  --pex: -24px;
196}
197