@import './../../../scss/v-sipsd-map-toolbars';

@keyframes sipsd-map-toolbar-animation {
  from {
    left: 0;
    opacity: 0;
  }
}

.sipsd-map-toolbar-host {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 32px;
  animation-name: sipsd-map-toolbar-animation;
  animation-duration: .55s;
}

.sipsd-map-toolbar {
  width: 32px;
}

.toolbar-function {
  width: 32px;
  height: 32px;
  position: relative;
  border: 1px solid #d9d9d9;
  background-image: url($toolbar-function-background-image-url);
  background-color: #fff;
  cursor: pointer;
  transition-property: width, opacity;
  transition-duration: .55s;
}

.children-function {
  position: absolute;
  top: -1px;
  left: 32px;
  overflow: hidden;
  transition: width .55s;

  &>div {
    float: left;
  }
}

.show-child-function {

  .toolbar-function {
    width: 32px;
    opacity: 1;
  }
}

.hide-child-function {

  .toolbar-function {
    width: 0;
    opacity: 0;
  }
}

.function-fullExtent {
  background-position-x: -60px;

  &:hover {
    background-position-y: -30px;
  }
}

.function-zoomIn {
  background-position-x: -120px;

  &:hover {
    background-position-y: -30px;
  }
}

.function-zoomOut {
  background-position-x: -150px;

  &:hover {
    background-position-y: -30px;
  }
}

.function-pan {
  background-position-x: -150px;
  background-position-y: -60px;

  &:hover {
    background-position-y: -90px;
  }
}

.function-getExtent {
  background-position-x: -90px;

  &:hover {
    background-position-y: -30px;
  }
}

.function-measureLength {
  background-position-x: -180px;

  &:hover {
    background-position-y: -30px;
  }
}

.function-measureArea {
  background-position-x: -210px;

  &:hover {
    background-position-y: -30px;
  }
}

.function-drawGraphics {
  background-position-x: -180px;
  background-position-y: -120px;

  &:hover {
    background-position-y: -150px;
  }
}

.function-drawPoint {
  background-position-y: -120px;

  &:hover {
    background-position-y: -150px;
  }
}

.function-drawPolyline {
  background-position-x: -30px;
  background-position-y: -120px;

  &:hover {
    background-position-y: -150px;
  }
}

.function-drawPolygon {
  background-position-x: -60px;
  background-position-y: -120px;

  &:hover {
    background-position-y: -150px;
  }
}

.function-iQuery {
  background-position-y: -60px;

  &:hover {
    background-position-y: -90px;
  }
}

.function-buildingTableQuery {
  background-position-x: -240px;

  &:hover {
    background-position-y: -30px;
  }
}

.function-swipeCompare {
  background-position-x: -30px;
  background-position-y: -60px;

  &:hover {
    background-position-y: -90px;
  }
}

.function-doubleCompare {
  background-position-x: -60px;
  background-position-y: -60px;

  &:hover {
    background-position-y: -90px;
  }
}

.function-selectGraphics {
  background-position-y: -180px;

  &:hover {
    background-position-y: -210px;
  }
}

.function-selectCircle {
  background-position-x: -60px;
  background-position-y: -180px;

  &:hover {
    background-position-y: -210px;
  }
}

.function-selectRectangle {
  background-position-x: -30px;
  background-position-y: -180px;

  &:hover {
    background-position-y: -210px;
  }
}

.function-selectPolygon {
  background-position-x: -90px;
  background-position-y: -180px;

  &:hover {
    background-position-y: -210px;
  }
}

.function-clearGraphics {
  background-position-x: -90px;
  background-position-y: -60px;

  &:hover {
    background-position-y: -90px;
  }
}