@sentroy-co/client-sdk 2.13.4 → 2.13.7

package/dist/react/crop/styles.css

@@ -1,78 +1,821 @@
+.advanced-cropper-line-wrapper--north, .advanced-cropper-line-wrapper--south {
+  height: 12px;
+  width: 100%;
+}
+
+.advanced-cropper-line-wrapper--north {
+  cursor: n-resize;
+}
+
+.advanced-cropper-line-wrapper--south {
+  cursor: s-resize;
+}
+
+.advanced-cropper-line-wrapper--east, .advanced-cropper-line-wrapper--west {
+  width: 12px;
+  height: 100%;
+}
+
+.advanced-cropper-line-wrapper--east {
+  cursor: e-resize;
+}
+
+.advanced-cropper-line-wrapper--west {
+  cursor: w-resize;
+}
+
+.advanced-cropper-line-wrapper--disabled {
+  cursor: auto;
+}
+
+.advanced-cropper-line-wrapper__content {
+  position: absolute;
+}
+
+.advanced-cropper-line-wrapper__content--east, .advanced-cropper-line-wrapper__content--west {
+  height: 100%;
+}
+
+.advanced-cropper-line-wrapper__content--north, .advanced-cropper-line-wrapper__content--south {
+  width: 100%;
+}
+
+.advanced-cropper-line-wrapper__content--east {
+  left: 50%;
+  -webkit-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
+
+.advanced-cropper-line-wrapper__content--west {
+  right: 50%;
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
+}
+
+.advanced-cropper-line-wrapper__content--north {
+  top: 50%;
+}
+
+.advanced-cropper-line-wrapper__content--south {
+  bottom: 50%;
+}
+
+.advanced-cropper-handler-wrapper {
+  position: absolute;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 30px;
+  height: 30px;
+}
+
+.advanced-cropper-handler-wrapper__draggable {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.advanced-cropper-handler-wrapper--west-north {
+  cursor: nw-resize;
+}
+
+.advanced-cropper-handler-wrapper--north {
+  cursor: n-resize;
+}
+
+.advanced-cropper-handler-wrapper--east-north {
+  cursor: ne-resize;
+}
+
+.advanced-cropper-handler-wrapper--east {
+  cursor: e-resize;
+}
+
+.advanced-cropper-handler-wrapper--east-south {
+  cursor: se-resize;
+}
+
+.advanced-cropper-handler-wrapper--south {
+  cursor: s-resize;
+}
+
+.advanced-cropper-handler-wrapper--west-south {
+  cursor: sw-resize;
+}
+
+.advanced-cropper-handler-wrapper--west {
+  cursor: w-resize;
+}
+
+.advanced-cropper-handler-wrapper--disabled {
+  cursor: auto;
+}
+
+.advanced-cropper-bounding-box {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.advanced-cropper-bounding-box__handler-wrapper {
+  position: absolute;
+}
+
+.advanced-cropper-bounding-box__handler-wrapper--east, .advanced-cropper-bounding-box__handler-wrapper--west {
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+  height: 100%;
+}
+
+.advanced-cropper-bounding-box__handler-wrapper--south, .advanced-cropper-bounding-box__handler-wrapper--north {
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+  width: 100%;
+}
+
+.advanced-cropper-bounding-box__handler-wrapper--west, .advanced-cropper-bounding-box__handler-wrapper--west-north, .advanced-cropper-bounding-box__handler-wrapper--west-south {
+  left: 0;
+}
+
+.advanced-cropper-bounding-box__handler-wrapper--east, .advanced-cropper-bounding-box__handler-wrapper--east-north, .advanced-cropper-bounding-box__handler-wrapper--east-south {
+  left: 100%;
+}
+
+.advanced-cropper-bounding-box__handler-wrapper--north, .advanced-cropper-bounding-box__handler-wrapper--west-north, .advanced-cropper-bounding-box__handler-wrapper--east-north {
+  top: 0;
+}
+
+.advanced-cropper-bounding-box__handler-wrapper--south, .advanced-cropper-bounding-box__handler-wrapper--west-south, .advanced-cropper-bounding-box__handler-wrapper--east-south {
+  top: 100%;
+}
+
+.advanced-cropper-bounding-box__handler {
+  position: absolute;
+}
+
+.advanced-cropper-bounding-box__handler--west-north {
+  left: 0;
+  top: 0;
+}
+
+.advanced-cropper-bounding-box__handler--north {
+  left: 50%;
+  top: 0;
+}
+
+.advanced-cropper-bounding-box__handler--east-north {
+  left: 100%;
+  top: 0;
+}
+
+.advanced-cropper-bounding-box__handler--east {
+  left: 100%;
+  top: 50%;
+}
+
+.advanced-cropper-bounding-box__handler--east-south {
+  left: 100%;
+  top: 100%;
+}
+
+.advanced-cropper-bounding-box__handler--south {
+  left: 50%;
+  top: 100%;
+}
+
+.advanced-cropper-bounding-box__handler--west-south {
+  left: 0;
+  top: 100%;
+}
+
+.advanced-cropper-bounding-box__handler--west {
+  left: 0;
+  top: 50%;
+}
+
+.advanced-cropper-bounding-box__line {
+  position: absolute;
+}
+
+.advanced-cropper-bounding-box__line--north, .advanced-cropper-bounding-box__line--south {
+  left: 0;
+  -webkit-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.advanced-cropper-bounding-box__line--north {
+  top: 0;
+}
+
+.advanced-cropper-bounding-box__line--south {
+  top: 100%;
+}
+
+.advanced-cropper-bounding-box__line--west, .advanced-cropper-bounding-box__line--east {
+  top: 0;
+  -webkit-transform: translateX(-50%);
+  transform: translateX(-50%);
+}
+
+.advanced-cropper-bounding-box__line--west {
+  left: 0;
+}
+
+.advanced-cropper-bounding-box__line--east {
+  left: 100%;
+}
+
+.advanced-cropper-artificial-transition {
+  will-change: transform;
+}
+
+.advanced-cropper-background-image {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  position: absolute;
+  -webkit-transform-origin: center;
+  transform-origin: center;
+  pointer-events: none;
+  max-width: none !important;
+}
+
+.advanced-cropper-canvas {
+  display: none;
+}
+
+.advanced-cropper-source {
+  width: 1px;
+  height: 1px;
+  visibility: hidden;
+  position: absolute;
+  opacity: 0;
+}
+
+.advanced-cropper-fade {
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.advanced-cropper-fade--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.advanced-cropper-wrapper__fade {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-height: 0;
+}
+
+.advanced-cropper-stencil-grid {
+  display: table;
+  border-collapse: collapse;
+  table-layout: fixed;
+  opacity: 0;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+
+.advanced-cropper-stencil-grid--visible {
+  opacity: 1;
+}
+
+.advanced-cropper-stencil-grid__row {
+  display: table-row;
+}
+
+.advanced-cropper-stencil-grid__cell {
+  display: table-cell;
+  width: 1%;
+  height: 1%;
+  border: currentColor solid 1px;
+}
+
+.advanced-cropper-stencil-grid__cell--top {
+  border-top-color: transparent;
+}
+
+.advanced-cropper-stencil-grid__cell--left {
+  border-left-color: transparent;
+}
+
+.advanced-cropper-stencil-grid__cell--right {
+  border-right-color: transparent;
+}
+
+.advanced-cropper-stencil-grid__cell--bottom {
+  border-bottom-color: transparent;
+}
+
+.advanced-cropper-stencil-overlay {
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+  -webkit-box-shadow: 0 0 0 1000px currentColor;
+  box-shadow: 0 0 0 1000px currentColor;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  -webkit-backface-visibility: hidden;
+}
+
+.advanced-cropper-stencil-wrapper {
+  will-change: transform;
+}
+
+.advanced-cropper-boundary {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  direction: ltr;
+  position: relative;
+}
+
+.advanced-cropper-boundary__content {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.advanced-cropper-boundary__stretcher {
+  pointer-events: none;
+  position: relative;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.advanced-cropper-circle-stencil {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+  -webkit-backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d;
+}
+
+.advanced-cropper-circle-stencil__overlay {
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.advanced-cropper-circle-stencil__preview {
+  border-radius: 50%;
+}
+
+.advanced-cropper-circle-stencil__draggable-area, .advanced-cropper-circle-stencil__overlay, .advanced-cropper-circle-stencil__preview, .advanced-cropper-circle-stencil__grid {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.advanced-cropper-circle-stencil--movable {
+  cursor: move;
+}
+
+.advanced-cropper-rectangle-stencil {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d;
+}
+
+.advanced-cropper-rectangle-stencil__draggable-area, .advanced-cropper-rectangle-stencil__overlay, .advanced-cropper-rectangle-stencil__preview, .advanced-cropper-rectangle-stencil__grid {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+
+.advanced-cropper-rectangle-stencil--movable {
+  cursor: move;
+}
+
 .advanced-cropper-simple-line {
-  border-color: rgba(255, 255, 255, 0.8); }
-  .advanced-cropper-simple-line--hover {
-    border-color: white; }
+  background: none;
+  border-width: 0;
+}
+
+.advanced-cropper-simple-line--south, .advanced-cropper-simple-line--north {
+  height: 0;
+  width: 100%;
+}
+
+.advanced-cropper-simple-line--east, .advanced-cropper-simple-line--west {
+  height: 100%;
+  width: 0;
+}
+
+.advanced-cropper-simple-line--east {
+  border-right-width: 1px;
+}
+
+.advanced-cropper-simple-line--west {
+  border-left-width: 1px;
+}
+
+.advanced-cropper-simple-line--south {
+  border-bottom-width: 1px;
+}
+
+.advanced-cropper-simple-line--north {
+  border-top-width: 1px;
+}
+
+.advanced-cropper-simple-handler {
+  display: block;
+}
+
+.advanced-cropper-preview {
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.advanced-cropper-preview__content {
+  overflow: hidden;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.advanced-cropper-preview__image {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-transform-origin: center;
+  transform-origin: center;
+  max-width: none !important;
+}
+
+.advanced-cropper-preview__image--visible {
+  display: block;
+}
+
+.advanced-cropper-preview__boundary {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+.cropper-preview-wrapper__fade {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-height: 0;
+  width: 100%;
+}
+
+.advanced-cropper {
+  overflow: hidden;
+  max-height: 100%;
+  background: black;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  color: white;
+}
+
+.advanced-cropper__boundary {
+  -webkit-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+.advanced-cropper__wrapper, .advanced-cropper__background-wrapper {
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+.advanced-cropper__stencil-wrapper {
+  position: absolute;
+}
+
+.advanced-cropper * {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
 
-.advanced-cropper-simple-handler-wrapper {
+.advanced-cropper-simple-handler {
+  background: currentColor;
+  height: 10px;
+  width: 10px;
+}
+
+.advanced-cropper-simple-line {
+  -webkit-transition: border 0.5s;
+  transition: border 0.5s;
+  border-color: rgba(255, 255, 255, 0.3);
+  border-style: solid;
+}
+
+.advanced-cropper-simple-line--hover {
+  border-color: white;
+}
+
+.advanced-cropper-circle-stencil__preview {
+  border: solid 2px rgba(255, 255, 255, 0.2);
+}
+
+.advanced-cropper-stencil-overlay {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.advanced-cropper-stencil-grid {
+  color: rgba(255, 255, 255, 0.4);
+}
+
+.advanced-cropper-simple-line {
+  border-color: rgba(255, 255, 255, 0.7);
+}
+.advanced-cropper-simple-line--east {
+  border-right-width: 2px;
+}
+.advanced-cropper-simple-line--west {
+  border-left-width: 2px;
+}
+.advanced-cropper-simple-line--south {
+  border-bottom-width: 2px;
+}
+.advanced-cropper-simple-line--north {
+  border-top-width: 2px;
+}
+.advanced-cropper-simple-line--hover {
+  border-color: white;
+}
+
+.advanced-cropper-bounding-box__handler {
   width: 24px;
-  height: 24px; }
-  .advanced-cropper-simple-handler-wrapper--west-north {
-    -webkit-transform: translate(0, 0);
-            transform: translate(0, 0); }
-  .advanced-cropper-simple-handler-wrapper--east-south {
-    -webkit-transform: translate(-100%, -100%);
-            transform: translate(-100%, -100%); }
-  .advanced-cropper-simple-handler-wrapper--west-south {
-    -webkit-transform: translate(0, -100%);
-            transform: translate(0, -100%); }
-  .advanced-cropper-simple-handler-wrapper--east-north {
-    -webkit-transform: translate(-100%, 0);
-            transform: translate(-100%, 0); }
+  height: 24px;
+}
+.advanced-cropper-bounding-box__handler--west-north {
+  -webkit-transform: translate(-5px, -5px);
+          transform: translate(-5px, -5px);
+}
+.advanced-cropper-bounding-box__handler--east-south {
+  -webkit-transform: translate(-19px, -19px);
+          transform: translate(-19px, -19px);
+}
+.advanced-cropper-bounding-box__handler--west-south {
+  -webkit-transform: translate(-5px, -19px);
+          transform: translate(-5px, -19px);
+}
+.advanced-cropper-bounding-box__handler--east-north {
+  -webkit-transform: translate(-19px, -5px);
+          transform: translate(-19px, -5px);
+}
 
 .advanced-cropper-simple-handler {
   display: block;
   position: relative;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
   -webkit-transition: opacity 0.5s;
   transition: opacity 0.5s;
   border: none;
   background: currentColor;
-  height: 4px;
-  width: 4px;
-  opacity: 0; }
-  .advanced-cropper-simple-handler--west-north, .advanced-cropper-simple-handler--east-south, .advanced-cropper-simple-handler--west-south, .advanced-cropper-simple-handler--east-north {
-    display: block;
-    height: 16px;
-    width: 16px;
-    background: none;
-    opacity: 0.7; }
-  .advanced-cropper-simple-handler--west-north {
-    border-left: solid 2px currentColor;
-    border-top: solid 2px currentColor; }
-  .advanced-cropper-simple-handler--east-south {
-    border-right: solid 2px currentColor;
-    border-bottom: solid 2px currentColor; }
-  .advanced-cropper-simple-handler--west-south {
-    border-left: solid 2px currentColor;
-    border-bottom: solid 2px currentColor; }
-  .advanced-cropper-simple-handler--east-north {
-    border-right: solid 2px currentColor;
-    border-top: solid 2px currentColor; }
-  .advanced-cropper-simple-handler--hover {
-    opacity: 1; }
+  top: auto;
+  left: auto;
+  height: 0px;
+  width: 0px;
+  opacity: 0;
+}
+.advanced-cropper-simple-handler--west-north, .advanced-cropper-simple-handler--east-south, .advanced-cropper-simple-handler--west-south, .advanced-cropper-simple-handler--east-north {
+  display: block;
+  height: 16px;
+  width: 16px;
+  background: none;
+  opacity: 1;
+}
+.advanced-cropper-simple-handler--west-north {
+  border-left: solid 3px currentColor;
+  border-top: solid 3px currentColor;
+}
+.advanced-cropper-simple-handler--east-south {
+  border-right: solid 3px currentColor;
+  border-bottom: solid 3px currentColor;
+}
+.advanced-cropper-simple-handler--west-south {
+  border-left: solid 3px currentColor;
+  border-bottom: solid 3px currentColor;
+}
+.advanced-cropper-simple-handler--east-north {
+  border-right: solid 3px currentColor;
+  border-top: solid 3px currentColor;
+}
+.advanced-cropper-simple-handler--hover {
+  opacity: 1;
+}
 
-.advanced-cropper-circle-stencil__preview {
-  border: solid 2px rgba(255, 255, 255, 0.8); }
+.advanced-cropper-circle-stencil {
+  border-color: rgba(255, 255, 255, 0.4);
+}
 
-.advanced-cropper-circle-stencil .advanced-cropper-simple-line {
-  border-color: rgba(255, 255, 255, 0.3); }
+.advanced-cropper-stencil-grid {
+  color: rgba(255, 255, 255, 0.5);
+}
 
-.advanced-cropper-circle-stencil .advanced-cropper-simple-handler--west-north, .advanced-cropper-circle-stencil .advanced-cropper-simple-handler--east-south, .advanced-cropper-circle-stencil .advanced-cropper-simple-handler--west-south, .advanced-cropper-circle-stencil .advanced-cropper-simple-handler--east-north {
-  opacity: 0.4; }
+.rmc-cropper {
+  color: #61DAFB;
+}
 
-.advanced-cropper-circle-stencil .advanced-cropper-simple-handler--hover {
-  opacity: 1; }
+.rmc-cropper-wrapper {
+  padding: 40px 10px;
+  overflow: hidden;
+  background: black;
+  max-height: 100%;
+}
+.rmc-cropper-wrapper--with-navigation {
+  padding-bottom: 80px;
+}
+.rmc-cropper-wrapper__content {
+  position: relative;
+}
+.rmc-cropper-wrapper__fade {
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  min-height: 0;
+}
+.rmc-cropper-wrapper__navigation {
+  position: absolute;
+  bottom: 0;
+  max-width: 450px;
+  width: 100%;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.rmc-cropper-wrapper__spinner {
+  visibility: hidden;
+  opacity: 0;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  -webkit-transition-delay: 0s;
+          transition-delay: 0s;
+  stroke: currentColor;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
+.rmc-cropper-wrapper__spinner--visible {
+  -webkit-transition-delay: 0.5s;
+          transition-delay: 0.5s;
+  opacity: 1;
+  visibility: visible;
+}
 
-.advanced-cropper-stencil-grid {
-  color: rgba(255, 255, 255, 0.7); }
+.rmc-navigation {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  padding: 20px 15px;
+}
+.rmc-navigation__rotator {
+  width: 100%;
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.rmc-navigation__button {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  margin: 0 5px;
+  background: none;
+  border: none;
+  outline: none;
+  -webkit-transition: -webkit-transform 0.5s;
+  transition: -webkit-transform 0.5s;
+  transition: transform 0.5s;
+  transition: transform 0.5s, -webkit-transform 0.5s;
+  padding: 0;
+}
+.rmc-navigation__button:hover, .rmc-navigation__button:focus {
+  -webkit-transform: scale(1.1);
+          transform: scale(1.1);
+}
 
-/* ─ Sentroy overrides ────────────────────────────────────────────────── */
-.advanced-cropper-line-wrapper--east,
-.advanced-cropper-line-wrapper--west,
-.advanced-cropper-line-wrapper--north,
-.advanced-cropper-line-wrapper--south {
-  width: 2px !important;
+.rmc-rotate-component__bars {
+  cursor: -webkit-grab;
+  cursor: grab;
+  width: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  min-width: 0;
+  position: relative;
+  height: 15px;
 }
-.advanced-cropper-handler-wrapper {
-  height: auto !important;
-  width: auto !important;
+.rmc-rotate-component__bars--dragging {
+  cursor: -webkit-grabbing !important;
+  cursor: grabbing !important;
+}
+.rmc-rotate-component__bar {
+  position: absolute;
+  left: 0;
+  height: 15px;
+  width: 3px;
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  background: white;
+}
+.rmc-rotate-component__bar--highlighted {
+  background-color: currentColor;
 }
+.rmc-rotate-component__bar--zero {
+  height: 20px;
+}
+.rmc-rotate-component__value {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+  width: 3px;
+  background-color: currentColor;
+  color: currentColor;
+  height: 25px;
+  border-radius: 2px;
+}
+.rmc-rotate-component__value-number {
+  position: absolute;
+  top: -20px;
+  color: inherit;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  font-size: 12px;
+}
+
+body.dragging {
+  cursor: -webkit-grabbing !important;
+  cursor: grabbing !important;
+}