1[id='toggle-heart'] {
2  display: none;
3}
4
5[id='toggle-heart']:checked + label {
6  color: #e2264d;
7  filter: none;
8  will-change: font-size;
9  animation: heart 1s cubic-bezier(0.17, 0.89, 0.32, 1.49);
10}
11
12[id='toggle-heart']:checked + label:before, [id='toggle-heart']:checked + label:after {
13  animation: inherit;
14  animation-timing-function: ease-out;
15}
16
17[id='toggle-heart']:checked + label:before {
18  will-change: transform, border-width, border-color;
19  animation-name: bubble;
20}
21
22[id='toggle-heart']:checked + label:after {
23  will-change: opacity, box-shadow;
24  animation-name: sparkles;
25}
26
27[id='toggle-heart']:focus + label {
28  text-shadow: 0 0 3px white, 0 1px 1px white, 0 -1px 1px white, 1px 0 1px white, -1px 0 1px white;
29}
30
31[for='toggle-heart'] {
32  align-self: center;
33  position: relative;
34  color: #888;
35  font-size: 2em;
36  filter: grayscale(1);
37  user-select: none;
38  cursor: pointer;
39}
40
41[for='toggle-heart']:before, [for='toggle-heart']:after {
42  position: absolute;
43  z-index: -1;
44  top: 50%;
45  left: 50%;
46  border-radius: 50%;
47  content: '';
48}
49
50[for='toggle-heart']:before {
51  box-sizing: border-box;
52  margin: -2.25rem;
53  border: solid 2.25rem #e2264d;
54  width: 4.5rem;
55  height: 4.5rem;
56  transform: scale(0);
57}
58
59[for='toggle-heart']:after {
60  margin: -0.1875rem;
61  width: 0.375rem;
62  height: 0.375rem;
63  box-shadow: 2.8125rem*cos(-90deg)0.375rem*cos(-30deg) 2.8125rem*sin(-90deg)0.375rem*sin(-30deg) 0 -0.1875rem #ff8080, 2.8125rem*cos(-90deg)0.375rem*cos(150deg) 2.8125rem*sin(-90deg)0.375rem*sin(150deg) 0 -0.1875rem #ffed80, 2.8125rem*cos(-38.5714285714deg)0.375rem*cos(21.4285714286deg) 2.8125rem*sin(-38.5714285714deg)0.375rem*sin(21.4285714286deg) 0 -0.1875rem #ffed80, 2.8125rem*cos(-38.5714285714deg)0.375rem*cos(201.4285714286deg) 2.8125rem*sin(-38.5714285714deg)0.375rem*sin(201.4285714286deg) 0 -0.1875rem #a4ff80, 2.8125rem*cos(12.8571428571deg)0.375rem*cos(72.8571428571deg) 2.8125rem*sin(12.8571428571deg)0.375rem*sin(72.8571428571deg) 0 -0.1875rem #a4ff80, 2.8125rem*cos(12.8571428571deg)0.375rem*cos(252.8571428571deg) 2.8125rem*sin(12.8571428571deg)0.375rem*sin(252.8571428571deg) 0 -0.1875rem #80ffc8, 2.8125rem*cos(64.2857142857deg)0.375rem*cos(124.2857142857deg) 2.8125rem*sin(64.2857142857deg)0.375rem*sin(124.2857142857deg) 0 -0.1875rem #80ffc8, 2.8125rem*cos(64.2857142857deg)0.375rem*cos(304.2857142857deg) 2.8125rem*sin(64.2857142857deg)0.375rem*sin(304.2857142857deg) 0 -0.1875rem #80c8ff, 2.8125rem*cos(115.7142857143deg)0.375rem*cos(175.7142857143deg) 2.8125rem*sin(115.7142857143deg)0.375rem*sin(175.7142857143deg) 0 -0.1875rem #80c8ff, 2.8125rem*cos(115.7142857143deg)0.375rem*cos(355.7142857143deg) 2.8125rem*sin(115.7142857143deg)0.375rem*sin(355.7142857143deg) 0 -0.1875rem #a480ff, 2.8125rem*cos(167.1428571429deg)0.375rem*cos(227.1428571429deg) 2.8125rem*sin(167.1428571429deg)0.375rem*sin(227.1428571429deg) 0 -0.1875rem #a480ff, 2.8125rem*cos(167.1428571429deg)0.375rem*cos(407.1428571429deg) 2.8125rem*sin(167.1428571429deg)0.375rem*sin(407.1428571429deg) 0 -0.1875rem #ff80ed, 2.8125rem*cos(218.5714285714deg)0.375rem*cos(278.5714285714deg) 2.8125rem*sin(218.5714285714deg)0.375rem*sin(278.5714285714deg) 0 -0.1875rem #ff80ed, 2.8125rem*cos(218.5714285714deg)0.375rem*cos(458.5714285714deg) 2.8125rem*sin(218.5714285714deg)0.375rem*sin(458.5714285714deg) 0 -0.1875rem #ff8080;
64}
65
66@keyframes heart {
67  0%, 17.5% {
68    font-size: 0;
69  }
70}
71
72@keyframes bubble {
73  15% {
74    transform: scale(1);
75    border-color: #cc8ef5;
76    border-width: 2.25rem;
77  }
78
79  30%, 100% {
80    transform: scale(1);
81    border-color: #cc8ef5;
82    border-width: 0;
83  }
84}
85
86@keyframes sparkles {
87  0%, 20% {
88    opacity: 0;
89  }
90
91  25% {
92    opacity: 1;
93    box-shadow: 2.25rem*cos(-90deg)0.375rem*cos(-30deg) 2.25rem*sin(-90deg)0.375rem*sin(-30deg) 0 0rem #ff8080, 2.25rem*cos(-90deg)0.375rem*cos(150deg) 2.25rem*sin(-90deg)0.375rem*sin(150deg) 0 0rem #ffed80, 2.25rem*cos(-38.5714285714deg)0.375rem*cos(21.4285714286deg) 2.25rem*sin(-38.5714285714deg)0.375rem*sin(21.4285714286deg) 0 0rem #ffed80, 2.25rem*cos(-38.5714285714deg)0.375rem*cos(201.4285714286deg) 2.25rem*sin(-38.5714285714deg)0.375rem*sin(201.4285714286deg) 0 0rem #a4ff80, 2.25rem*cos(12.8571428571deg)0.375rem*cos(72.8571428571deg) 2.25rem*sin(12.8571428571deg)0.375rem*sin(72.8571428571deg) 0 0rem #a4ff80, 2.25rem*cos(12.8571428571deg)0.375rem*cos(252.8571428571deg) 2.25rem*sin(12.8571428571deg)0.375rem*sin(252.8571428571deg) 0 0rem #80ffc8, 2.25rem*cos(64.2857142857deg)0.375rem*cos(124.2857142857deg) 2.25rem*sin(64.2857142857deg)0.375rem*sin(124.2857142857deg) 0 0rem #80ffc8, 2.25rem*cos(64.2857142857deg)0.375rem*cos(304.2857142857deg) 2.25rem*sin(64.2857142857deg)0.375rem*sin(304.2857142857deg) 0 0rem #80c8ff, 2.25rem*cos(115.7142857143deg)0.375rem*cos(175.7142857143deg) 2.25rem*sin(115.7142857143deg)0.375rem*sin(175.7142857143deg) 0 0rem #80c8ff, 2.25rem*cos(115.7142857143deg)0.375rem*cos(355.7142857143deg) 2.25rem*sin(115.7142857143deg)0.375rem*sin(355.7142857143deg) 0 0rem #a480ff, 2.25rem*cos(167.1428571429deg)0.375rem*cos(227.1428571429deg) 2.25rem*sin(167.1428571429deg)0.375rem*sin(227.1428571429deg) 0 0rem #a480ff, 2.25rem*cos(167.1428571429deg)0.375rem*cos(407.1428571429deg) 2.25rem*sin(167.1428571429deg)0.375rem*sin(407.1428571429deg) 0 0rem #ff80ed, 2.25rem*cos(218.5714285714deg)0.375rem*cos(278.5714285714deg) 2.25rem*sin(218.5714285714deg)0.375rem*sin(278.5714285714deg) 0 0rem #ff80ed, 2.25rem*cos(218.5714285714deg)0.375rem*cos(458.5714285714deg) 2.25rem*sin(218.5714285714deg)0.375rem*sin(458.5714285714deg) 0 0rem #ff8080;
94  }
95}
96