@import "../../node_modules/ol/ol.css";

html, body {
  margin: 0px;
  height: 100%;
}
#map {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  background-color: lightyellow; /* testing */
}
#sidebar {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 8%;
  height: 100%;
  background-color: #8cea8c87; /* testing */
}

#sidebar button {
  cursor:  pointer;
  padding: 0px;
  margin-top: 10px;
  border:  0px;
  background-color: transparent;
}
/*
#sidebar > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  height: 10%;
  padding: 10px;
}*/


#sidebar > div {
  text-align: center;
  width: 100%;
  padding: 0px;
}

#zoom_controls {
  position: absolute;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  height: 10%;
  padding: 10px;
}
#layer_controls {
  position: absolute;
  top: 20%;
}

#layer_toggle {
  display: none;
}

#sidebar input[type="checkbox"] {
  display: none; 
}
#sidebar input[type="checkbox"] + label {
  background-size: contain;
  display: inline-block;
  width: 42px;
  height: 42px;
  padding: 0 0 0 0px;
  cursor: pointer;
}

#sidebar input[type="checkbox"]:checked + label{
  /* https://codepen.io/sosuke/pen/Pjoqqp : To convert color to svg filter */
  /* color: #6f0505 */
  filter: invert(11%) sepia(66%) saturate(3800%) hue-rotate(353deg) brightness(88%) contrast(112%);
}

#layer_toggle + label {
  background: url('/public/pics/icons/layers.svg') no-repeat;
}

#draw_toggle + label {
  background: url('/public/pics/icons/pen.svg') no-repeat;
}
#modify_toggle + label {
  background: url('/public/pics/icons/modify.svg') no-repeat;
}
#select_toggle + label {
  background: url('/public/pics/icons/delete.svg') no-repeat;
}
#app_controls{
  position: absolute;
  bottom: 10px;
}

#drawing_controls {
  position: absolute;
  bottom: 150px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  height: 15%;
  padding: 10px;
}