#selected-color {
  max-width: 160px;
  flex: 1;
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));
  margin-right: 7px;
}
#color-range {
  height: 160px;
  background-color: blue;
  background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
  background-color: hsl(var(--hue) 100% 50%);
  flex: 1;
  position: relative;
}
#color-picker {
  width: 22px;
  height: 22px;
  position: absolute;
}
#color-picker:after {
  display: block;
  position: relative;
  content: "";
  margin: -11px 0 0 -11px;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 3px solid #222;
  cursor: pointer;
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));
}
#hue-picker {
  padding: 12px 0;
}
#slider-background {
  background-image: linear-gradient(
    to right,
    hsl(0, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(360, 100%, 50%)
  );
  height: 16px;
  border-radius: 12px;
}
#slider-foreground {
  height: 100%;
  width: 50%;
  position: relative;
}
#slider-foreground:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto -11px auto auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 3px solid #222;
  cursor: pointer;
  background-color: hsl(var(--hue) 100% 50%);
}
.saved-color {
  width: 30px;
  height: 30px;
  background-color: #4d9999;
}
#save-color {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  position: relative;
}
#save-color:before,
#save-color:after {
  position: absolute;
  content: "";
  inset: 0;
  margin: auto;
  width: 14px;
  height: 2px;
  background-color: #888;
}
#save-color:after {
  width: 2px;
  height: 14px;
}