// Import any global variables from "../../variables/*.json"
@import "../../../variables/fonts.json";
@import "../../../variables/colors.json";
@import "../../../variables/spacing.json";

.floorplanRoot {
  position: relative;
  touch-action: none;

  // Hack to hide a rect that the pan zoom component makes
  :global(g[transform*=matrix] > rect) { display: none; }

  .floorplanContainer {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
}
.floorplanPopup {
  position: absolute;
  min-width: 400px;
  min-height: 200px;
  background-color: white;
  z-index: 100;
  border-radius: $border-radius-base;
  border: 1px solid $gray;
	box-shadow: 0 0 4px 0 rgba(0,0,0,0.2);

  cursor: default;

  // When `opacity: 1` is applied, fade in the popup.
  transition: opacity 150ms cubic-bezier(0.65, 0.05, 0.36, 1);

  // By default, hide the popup and make it not respond to click events.
  opacity: 0;
  pointer-events: none;

  font-family: $font-base;
}
.floorplanCursor {
  position: fixed;
  z-index: 1;
  white-space: nowrap;

  user-select: none;
  pointer-events: none;
  opacity: 0.8;

  & > svg {
    transform: translate(-10px, -13px);
  }
}
.floorplanCursorTag {
  color: #fff;
  background-color: $gray-cinder;
  padding: 7px;
  border-radius: 4px;

  font-family: $font-base;
  font-size: 12px;

  position: relative;
  top: -17px;
}
.floorplanTouchCreateHint {
  position: absolute;
  top: 40px;
  z-index: 5;

  width: 400px;
  transform: translate(-200px, 0px);

  line-height: 43px;
  height: 43px;

  background-color: $gray-cinder;
  font-family: $font-base;
  text-align: center;
  color: #fff;

  border-radius: $border-radius-base;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);

  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  opacity: 0;

  transition: all 250ms ease-in-out;
}

@keyframes floorplanLayerCreationAnimation {
  0% {
    opacity: 0;
    stroke-width: 50px;
  }

  50% {
    opacity: 0.2;
    stroke-width: 75px;
  }

  100% {
    opacity: 1;
    stroke-width: 0px;
  }
}

.floorplanLayerCreationAnimationCircle {
  animation-name: floorplanLayerCreationAnimation;
  animation-duration: 400ms;
}