@import '../../styles/partials/colors';

%header {
  color: $primary-color;
  font-weight: 500;
}

.location-ward-village-header {
  @extend %header;
  margin: 12px 0;
}

.location-child {
  padding: 5px 15px;
  margin: 5px 0;
}

.Collapsible {
  margin: 12px 0;
  cursor: pointer;
}

.Collapsible__trigger {
  @extend %header;
}

.location-modal {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
  border: 1px solid rgb(204, 204, 204);
  background: rgb(255, 255, 255);
  overflow: auto;
  border-radius: 4px;
  outline: none;
  padding: 20px;
}

@media (min-width: 1200px) {
  .location-modal {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 380px;
    max-height: 80%;
  }
}