/* #region global */
:root {
  --sketcher-blueprint-blue: #08306b;
  --sketcher-light-grey: #ccc;
}
.sketcher-warning {
  color: red;
  font-weight: bold;
}
.sketcher button {
  cursor: pointer;
  font-weight: bold;
  color: white;
  font-size: 16px;
  margin: 5px;
  border: 1px solid white;
  border-radius: 3px;
  background-color: transparent;
}
.sketcher button:hover {
  color: var(--sketcher-light-grey);
  border-color: var(--sketcher-light-grey);
}
.sketcher-notification {
  position: fixed;
  z-index: 900;
  top: 100vh;
  left: 50vw;
  transform: translate(-50%, 0);
  transition: 0.5s;
  padding: 10px 60px;
  font-weight: bold;
  background-color: darkgreen;
}
.sketcher-notification-active {
  transform: translate(-50%, -110%);
}
/* #endregion */

/* #region modal */
.sketcher-modal-content {
  border: 3px solid white;
  padding: 0 50px;
  text-align: center;
  white-space: pre-line;
}
.sketcher-modal-content-buttons {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.sketcher-modal-content-buttons > button {
  width: 80px;
}
/* #endregion */

.sketcher {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: var(--sketcher-blueprint-blue);
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.2) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 50px 50px;
  overflow: hidden;
  color: white;
}
.sketcher::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 60%
  );
  transform: translateX(-50%);
  pointer-events: none;
}
.sketcher-top-right-container {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
}
.sketcher-bottom-right-container {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 200;
}

.sketcher-nexus {
  width: 40px;
  float: right;
  margin-right:10px;
}
.sketcher .nexusButton-icon svg {
  fill: white;
}
.sketcher .nexusButton-icon:hover svg {
  fill: var(--sketcher-light-grey);
}
.sketcher .nexusButton-menu-button svg {
  stroke: white;
  fill: white;
}
.sketcher .nexusButton-menu-button:hover svg {
  stroke: var(--sketcher-light-grey);
  fill: var(--sketcher-light-grey);
}

/* #region canvas */
.sketcher canvas {
  opacity: 0;
}

.sketcher-image,
.sketcher-paths {
  position: fixed;
  transform-origin: 0 0;
}
.sketcher-image {
  z-index: 100;
}
.sketcher-paths {
  z-index: 101;
}
.sketcher-paths:hover {
  cursor: none;
}

.sketcher-image > img {
  width: 100%;
  height: 100%;
}
.sketcher-coord {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 5px 10px;
}
/* #endregion */