1  @import '../../common/styles/variables';
  2  
  3  .open {
  4    border-radius: 8px;
  5    box-shadow: 0px 4px 12px rgba(0, 34, 51, 0.08),
  6      0px 2px 4px rgba(0, 34, 51, 0.16);
  7    padding-top: calculateRem(12);
  8    margin: calculateRem(12) calculateRem(16);
  9    position: absolute;
 10    background: $background;
 11    width: calc(100% - 32px);
 12    top: 0;
 13    z-index: 1;
 14  
 15    h2 {
 16      color: $text-color;
 17      font-family: $font;
 18      font-size: calculateRem(13);
 19      margin: 0;
 20      font-weight: normal;
 21    }
 22  }
 23  
 24  .openHeader {
 25    display: flex;
 26    justify-content: space-between;
 27    align-items: center;
 28    padding: 0 calculateRem(16);
 29    margin-bottom: calculateRem(12);
 30  }
 31  
 32  .openHeader.spacing {
 33    margin-top: 31px;
 34  }
 35  
 36  .openButton {
 37    display: block;
 38    background: $background;
 39    border: none;
 40    font-family: $font;
 41    font-size: calculateRem(15);
 42    color: $headline-color;
 43    display: flex;
 44    width: 100%;
 45    cursor: pointer;
 46    align-content: center;
 47    line-height: calculateRem(22);
 48    padding: calculateRem(10) calculateRem(16);
 49  
 50    &:last-of-type {
 51      border-bottom-left-radius: 8px;
 52      border-bottom-right-radius: 8px;
 53    }
 54  
 55    svg {
 56      margin-right: calculateRem(19);
 57      fill: $headline-color;
 58    }
 59  }
 60  
 61  .openButton.submitDapp {
 62    margin-top: 24px;
 63  }
 64  
 65  .selected {
 66    background: $purple-bg;
 67    color: $purple;
 68  
 69    svg {
 70      fill: $purple;
 71    }
 72  }
 73  
 74  .closed {
 75    display: flex;
 76    width: 100%;
 77    margin: calculateRem(12) calculateRem(16);
 78    padding: calculateRem(10) calculateRem(15);
 79    width: calc(100% - 32px);
 80    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1),
 81      0px 2px 6px rgba(136, 122, 249, 0.2);
 82    border: none;
 83    border-radius: 8px;
 84    color: $background;
 85    font-family: $font;
 86    justify-content: space-between;
 87    cursor: pointer;
 88    align-items: center;
 89  }
 90  
 91  .closedText {
 92    display: flex;
 93    align-items: center;
 94  
 95    svg {
 96      fill: $background;
 97      margin-right: calculateRem(19);
 98    }
 99  }
100  
101  .EXCHANGES {
102    background: $purple;
103  }
104  
105  .MARKETPLACES {
106    background: $orange;
107  }
108  
109  .COLLECTIBLES {
110    background: $blue;
111  }
112  
113  .GAMES {
114    background: $pink;
115  }
116  
117  .SOCIAL_NETWORKS {
118    background: $green;
119  }
120  
121  .UTILITIES {
122    background: $red;
123  }
124  
125  .OTHER {
126    background: $yellow;
127    color: $headline-color;
128  }