.color-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2rem;
  width: 3rem;
}

.color-item:hover {
  cursor: pointer;
}

.color-item:hover .border {
  cursor: pointer;
  background-color: var(--bg-color);
  border-color: var(--bg-color);
}

.color-item .border {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 11px;
  width: 11px;
  border: 1px solid #CECAC9;
  border-radius: 50%;
}

.color-item .center {
  height: 9px;
  width: 9px;
  background-color: #CECAC9;
  border-radius: 50%;
}

.color-item.light-red {--bg-color: #FF8989;}
.color-item.light-yellow {--bg-color: #FFD591;}
.color-item.dark-red {--bg-color: #EC1074;}
.color-item.light-green {--bg-color: #86E723;}
.color-item.dark-yellow {--bg-color: #F5A623;}

.color-item.light-red .center,
.color-item.light-yellow .center,
.color-item.dark-red .center,
.color-item.light-green .center,
.color-item.dark-yellow .center {
  background-color: var(--bg-color);
}

.color-picker {
  position: relative;
}

.color-picker-popup .arrow {
  position: absolute;
  top: 25px;
  left: 9px;
  box-shadow: inset 2px 2px 2px -3px rgba(0, 0, 0, .2);
  height: 12px;
  width: 12px;
  transform: rotate(45deg);
  background-color: #ffffff;
  z-index: 2;
}

.color-picker-popup .arrow-over {
  box-shadow: inset -2px -2px 2px -3px rgba(0, 0, 0, .2);
  top: -17px;
}

.color-picker-popup .options {
  position: absolute;
  top: 32px;
  left: -3px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, .2);
  background-color: #ffffff;
  padding: 0.7rem 0.3rem;
  border-radius: 0.4rem;
  z-index: 1;
}

.color-picker-popup .options-over {
  top: -125px;
  box-shadow: 0px -1px 5px rgba(0, 0, 0, .2);
}
