1  @import '../../common/styles/variables';
 2  
 3  .dim {
 4    position: fixed;
 5    width: 100%;
 6    height: 100%;
 7    left: 0;
 8    top: 0;
 9    background: rgba(255, 255, 255, 0.5);
10    z-index: 20;
11  
12    transition-duration: 0.4s;
13    transition-property: opacity;
14  }
15  
16  .dim:not(.dimVisible) {
17    opacity: 0;
18    pointer-events: none;
19  }
20  
21  .cnt {
22    width: 40px;
23    height: 40px;
24    display: none;
25    align-items: center;
26    justify-content: center;
27    position: absolute;
28    left: 20px;
29    top: 60px;
30    border-radius: 50%;
31    background: #fff;
32    z-index: 1;
33    box-shadow: 0px 4px 12px rgba(0, 34, 51, 0.08),
34      0px 2px 4px rgba(0, 34, 51, 0.16);
35    transform: translateY(-50%);
36    cursor: pointer;
37    z-index: 24;
38  
39    @media (min-width: $desktop) {
40      display: flex;
41    }
42  }
43  
44  .cnt:before {
45    content: '';
46    width: 16px;
47    height: 6px;
48    border-top: 2px solid #000;
49    border-bottom: 2px solid #000;
50  }
51  
52  .dropDown {
53    width: 320px;
54    position: absolute;
55    left: 0;
56    top: 0;
57    opacity: 0;
58    transition-property: opacity;
59    transition-duration: 0.4s;
60  }
61  
62  .dropDown.visible {
63    opacity: 1;
64  }
65  
66  .dropDown:not(.visible) {
67    pointer-events: none;
68  }
69  
70  .dropDown .categorySelector > * {
71    margin: 0;
72  }
73  
74  .dropDown .categorySelector * {
75    user-select: none;
76  }