:root {
  --utilWheel-center-color: hsl(0, 0%, 8%);
  --utilWheel-border-color: hsl(0, 0%, 44%);
  --utilWheel-section-color: hsl(0, 0%, 19%);
  --utilWheel-center-size: 6em;
  --utilWheel-wheel-size: 27em;
  --utilWheel-gradient-stop: 21em;
  --utilWheel-dragover-scale: 0.92;
  --utilWheel-dragging-opacity: 0.575;
  --utilWheel-dragging-action-scale: 0.97;
}
.utility-wheel {
  position: absolute;
  left: 0;
  top: 0;
}
.utility-wheel.uw-hidden {
  display: none;
}
.utility-wheel * {
  box-sizing: border-box;
}
.utility-wheel .uw-section-target,
.utility-wheel .uw-section-content,
.utility-wheel .uw-circle-indicator {
  position: absolute;
}
.utility-wheel .uw-section-target {
  width: var(--utilWheel-wheel-size);
  height: var(--utilWheel-wheel-size);
  transform-origin: top left;
  border-image: radial-gradient(at 0 0, var(--utilWheel-border-color), transparent var(--utilWheel-gradient-stop)) 1;
}
.utility-wheel .uw-section-target:hover {
  background: radial-gradient(at 0 0, var(--utilWheel-section-color), transparent var(--utilWheel-gradient-stop));
}
.utility-wheel .uw-section-target.uw-left,
.utility-wheel .uw-section-target.uw-bottom {
  border-left: 2px solid var(--utilWheel-border-color);
}
.utility-wheel .uw-section-target.uw-right,
.utility-wheel .uw-section-target.uw-bottom {
  border-top: 2px solid var(--utilWheel-border-color);
}
.utility-wheel .uw-section-target.uw-top {
  transform: rotate(-135deg);
}
.utility-wheel .uw-section-target.uw-right {
  transform: rotate(-45deg);
}
.utility-wheel .uw-section-target.uw-bottom {
  transform: rotate(45deg);
}
.utility-wheel .uw-section-target.uw-left {
  transform: rotate(135deg);
}
.utility-wheel .uw-section-content {
  pointer-events: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.utility-wheel .uw-section-content.uw-top {
  transform: translate(-50%, -50%) translate(0, -50%);
}
.utility-wheel .uw-section-content.uw-right {
  transform: translate(-50%, -50%) translate(50%, 0);
}
.utility-wheel .uw-section-content.uw-bottom {
  transform: translate(-50%, -50%) translate(0, 50%);
}
.utility-wheel .uw-section-content.uw-left {
  transform: translate(-50%, -50%) translate(-50%, 0);
}
.utility-wheel .uw-circle-indicator {
  border-radius: 10rem;
  width: var(--utilWheel-center-size);
  height: var(--utilWheel-center-size);
  background-color: var(--utilWheel-center-color);
  border: 2px solid var(--utilWheel-border-color);
  transform: translate(-50%, -50%);
}
/* UtilityWheelUIConfig */
.uw-action {
  cursor: grab;
}
.uw-action.uw-dragging {
  transform: scale(var(--utilWheel-dragging-action-scale));
  opacity: var(--utilWheel-dragging-opacity);
}
.uw-section-content.uw-dragover > * {
  transform: scale(var(--utilWheel-dragover-scale));
  opacity: var(--utilWheel-dragging-opacity);
}
.uw-action,
.uw-section-content.uw-dragover > * {
  transition: transform 0.085s ease, color 0.1s ease-in-out;
}