:root {
  --xe-scribble--pen-color: #FF0000;
  --xe-scribble--button-draw-active-bg: #FF0000;
  --xe-scribble--button-draw-active-fg: #FFFFFF;
  --xe-scribble--button-active-color: #000000;
  --xe-scribble--button-inactive-color: #666666;
}

.xe-scribble__cursor__eraser {
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
}

.xe-scribble__cursor__eraser.hidden {
  display: none;
}

.xe-scribble {
  position: absolute;
  top: 0px;
  left: 0px;
}

.xe-scribble__canvas__drawing,
.xe-scribble__canvas,
.xe-scribble {
  pointer-events: none;
  z-index: 1;
}

.xe-scribble__canvas__drawing.active {
  pointer-events: all;
}

.xe-scribble__tools {
  position: absolute;
  top: 10px;
  right: 10px;
  pointer-events: all;
  z-index: 101;
  width: 32px;
}

.xe-scribble__button {
  cursor: pointer;
  padding: 3px;
  background: unset;
  border: unset;
  border-radius: 100%;
  width: 100%;
  height: calc(100% - 3px);
  margin-bottom: 5px;
  opacity: 1;
  transition: transform ease-out 100ms, opacity ease-out 80ms;
}

.xe-scribble__button:hover {
  background-color: #eee;
}
.xe-scribble__button.active {
  background-color: #4443;
}

.xe-scribble__tools.minimized > :nth-child(2) {
  opacity: 0;
  transform: translateY(-100%);
  transition: ease-in 100ms, opacity ease-in 80ms;
  z-index: 0;
  pointer-events: none;
}

.xe-scribble__tools.minimized > :nth-child(3) {
  opacity: 0;
  transform: translateY(-200%);
  transition: ease-in 100ms, opacity ease-in 80ms;
  z-index: 0;
  pointer-events: none;
}

.xe-scribble__tools.minimized > :nth-child(4) {
  opacity: 0;
  transform: translateY(-300%);
  transition: ease-in 100ms, opacity ease-in 80ms;
  z-index: 0;
  pointer-events: none;
}

.xe-scribble__button > svg {
  width: 100%;
  height: 100%;
}

.xe-scribble__button__draw,
.xe-scribble__button__erase,
.xe-scribble__button__clear {
  color: var(--xe-scribble--button-inactive-color);
}

.xe-scribble__button__draw:hover,
.xe-scribble__button__erase:hover,
.xe-scribble__button__clear:hover {
  color: var(--xe-scribble--button-active-color);
}

.xe-scribble__button__draw.active {
  color: var(--xe-scribble--button-draw-active-fg);
  background-color: var(--xe-scribble--button-draw-active-bg);
}

.xe-scribble__button__erase.active > svg,
.xe-scribble__button__clear:hover > svg {
  color: var(--xe-scribble--button-active-color);
}

#xe-scribble__colorPicker {
  border-radius: 100%;
  height: 30px;
  width: 30px;
  margin: 0;
  border: none;
  outline: none;
  -webkit-appearance: none;
}

#xe-scribble__colorPicker::-webkit-color-swatch-wrapper {
  padding: 0;
}

#xe-scribble__colorPicker::-webkit-color-swatch {
  border-radius: 100%;
}

#xe-scribble__colorPicker::-moz-color-swatch{
  border: none;
  border-radius: 100%;
}

/* ---
<div id="xe-scribble__tools">
  <button class="xe-scribble__button xe-scribble__button__draw active"><svg></svg></button>
  <button class="xe-scribble__button xe-scribble__button__erase"><svg></svg></button>
  <button class="xe-scribble__button xe-scribble__button__clear"><svg></svg></button>
  <input id="xe-scribble__colorPicker" class="xe-scribble__button" type="color" value="rgba(0, 0, 0, 1)">
</div>

#f44336 #E91E63 #9C27B0 #673AB7  #3F51B5 #2196F3 #03A9F4 #00BCD4 #009688 #4CAF50 #8BC34A #CDDC39 #FFEB3B #FFC107 #FF9800 #FF5722 #795548 #9E9E9E #000000 #FFFFFF
---*/