.thumb {
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--thumb-size); /*  fixed size regardless of autoscale */
  cursor: ew-resize;
}

.thumbBtnLike {
  position: relative;
  padding: 0;
  border-radius: 50%;
  box-shadow: -1px -1px 2px inset var(--h5w-btnRaised-hover--shadowColor, dimgray);
  transition: background-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
}

.thumb[data-auto='false'] > .thumbBtnLike {
  width: var(--thumb-size);
  height: var(--thumb-size);
  background-color: var(--h5w-domainSlider-thumb--bgColor, lightgray);
}

.thumb[data-auto='true'] > .thumbBtnLike {
  width: var(--thumb-size-auto);
  height: var(--thumb-size-auto);
  background-color: var(--h5w-domainSlider-thumb-auto--bgColor, whitesmoke);
}

.thumb[data-auto='false']:hover > .thumbBtnLike {
  opacity: 0.8;
  box-shadow: -2px -2px 2px inset var(--h5w-btnRaised-hover--shadowColor, dimgray);
}

.thumb[data-auto='true']:hover > .thumbBtnLike {
  box-shadow: -2px -2px 2px inset var(--h5w-btnRaised-hover--shadowColor, dimgray);
}

.thumb[data-error] {
  color: var(--h5w-error--color, brown);
  font-size: 1.125em;
}

.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Tweak centering of autoscale icons to compensate for inset shadows */
  transform: translate(-52%, -52%);
}