@import '../../styles/app';

.root {
  :global {
    .location-selector {
      width: 100%;
      height: 220px;
      border: 1px dotted theme-color("warning");
      background-color: $white;
      position: relative;
    }

    .location-selector .bit {
      @include transition(background-color 0.15s ease-in-out);

      background-color: rgba(255, 173, 1, 0.3);
      cursor: pointer;
      position: absolute;
    }

    .location-selector .bit:hover {
      background-color: theme-color("warning");
    }

    .location-selector .bit.top,
    .location-selector .bit.bottom {
      height: 20%;
      width: 20%;
      margin: 0 40%;
    }

    .location-selector .bit.top {
      top: 0;
    }

    .location-selector .bit.bottom {
      bottom: 0;
    }

    .location-selector .bit.right,
    .location-selector .bit.left {
      height: 20%;
      width: 20%;
      margin-left: 0;
      margin-right: 0;
    }

    .location-selector .bit.right {
      right: 0;
    }

    .location-selector .bit.left {
      left: 0;
    }
  }
}
