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

.location-selector {
  width: 100%;
  height: 220px;
  border: 1px dashed $location-selector-border;
  background-color: $location-selector-bg;
  position: relative;
}

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

  background-color: $location-selector-bit-bg;
  cursor: pointer;
  position: absolute;
}

.location-selector .bit:hover {
  background-color: darken($location-selector-bit-bg, 20%);
}

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

.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;
}
