.style-switcher {
  position: relative;
  top: 90;
  left: 0px;
  color: #fff;
  padding: 15px;
  padding-bottom: 0;
  width: 33rem;
  /* border: 1px solid var(--skin-color); */
  z-index: 101;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.style-switcher .s-icon {
  position: absolute;
  height: 40px;
  width: 40px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 50%;
  color: var(--skin-color);
}

.style-switcher .s-icon i {
  line-height: 40px;
}

.style-switcher .style-switcher-toggler {
  top: -24px;
}

.style-switcher .colors {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  position: absolute;
  left: 56px;
  top: -24px;
}

.style-switcher .colors span {
  display: inline-block;
  height: 27px;
  width: 27px;
  border-radius: 50%;
  border: 1px solid white;
  margin: 0.5rem;
  cursor: pointer;
}

.style-switcher .color-1 {
  background: #ff5bad;
}
.style-switcher .color-1:hover {
  border-color: #ff5bad;
}

.style-switcher .color-2 {
  background: #7ae0ff;
}
.style-switcher .color-2:hover {
  border-color: #7ae0ff;
}

.style-switcher .color-3 {
  background: #fff349;
}
.style-switcher .color-3:hover {
  border-color: #fff349;
}

.style-switcher .color-4 {
  background: #dc143c;
}
.style-switcher .color-4:hover {
  border-color: #dc143c;
}

.style-switcher .color-5 {
  background: #60f034;
}
.style-switcher .color-5:hover {
  border-color: #60f034;
}

/* .style-switcher h4, .style-switcher .colors  {
    display: none;
} */

.style-switcher.open .colors {
  display: flex;
}