1@mixin marginTransition {
2  transition: margin $duration--moderate-01, background $duration--moderate-01;
3}
4
5@mixin borderRadius {
6  -webkit-border-radius: 60px;
7  -moz-border-radius: 60px;
8  border-radius: 60px;
9}
10
11.toggle-container {
12  display: flex;
13}
14
15.toggle-switch {
16  position: absolute;
17  top: 0;
18  opacity: 0;
19}
20
21.toggle-switch + label {
22  display: block;
23  position: relative;
24  cursor: pointer;
25  outline: none;
26  -webkit-user-select: none;
27  -moz-user-select: none;
28  -ms-user-select: none;
29  user-select: none;
30}
31
32.toggle label {
33  text-indent: -9999px;
34  margin-right: 0.3rem;
35}
36
37input.toggle-switch__round-flat:focus + label {
38  outline: 1px solid $primary-accent;
39  outline-offset: 3px;
40}
41
42input.toggle-switch__round-flat + label {
43  padding: 2px;
44  width: 43px;
45  height: 22px;
46  background-color: $border-color-02;
47  @include borderRadius;
48  @include marginTransition;
49}
50
51input.toggle-switch__round-flat + label:before,
52input.toggle-switch__round-flat + label:after {
53  display: block;
54  position: absolute;
55  content: "";
56}
57input.toggle-switch__round-flat + label:before {
58  top: 2px;
59  left: 2px;
60  bottom: 2px;
61  right: 2px;
62  background-color: $primary-light;
63  @include borderRadius;
64  @include marginTransition;
65}
66input.toggle-switch__round-flat + label:after {
67  top: 4px;
68  left: 4px;
69  bottom: 4px;
70  width: 15px;
71  background-color: $border-color-02;
72  -webkit-border-radius: 52px;
73  -moz-border-radius: 52px;
74  border-radius: 52px;
75  @include marginTransition;
76}
77input.toggle-switch__round-flat:checked + label {
78  background-color: $primary-accent;
79}
80input.toggle-switch__round-flat:checked + label:before {
81  background-color: $primary-accent;
82}
83input.toggle-switch__round-flat:checked + label:after {
84  margin-left: 20px;
85  background-color: $primary-light;
86}
87