/*
@mixin toolbar-item($pos,$hoverPos) {
  background-position: 0 $pos;

  &:hover {
    background-position: 0 $hoverPos;
  }
}

$toolbar-size: 52px;
.toolbar-item, .toolbar-layer {
  background-image: url(../img/toolbar.png);
}

.toolbar {
  position: fixed;
  left: 50%;
  bottom: 5px;
  margin-left: -$toolbar-size / 2;
}

.toolbar-item {
  position: relative;
  display: block;
  width: $toolbar-size;
  height: $toolbar-size;
  margin-top: 1px;
  transition: background-position 1s;
  @include transition(background-position 1s);

  &:hover {
    .toolbar-layer {
      opacity: 1;
      @include opacity(1);
      @include scale(1);
    }
  }
}

.toolbar-item-weixin {
  @include toolbar-item(-798px, -860px);

  .toolbar-layer {
    height: 212px;
    background-position: 0 0;
  }
}

.toolbar-item-feedback {
  @include toolbar-item(-426px, -488px);
}

.toolbar-item-app {
  @include toolbar-item(-550px, -612px);

  .toolbar-layer {
    height: 194px;
    background-position: 0 -222px;
  }
}

.toolbar-item-top {
  @include toolbar-item(-674px, -736px);
}

.toolbar-layer {
  position: absolute;
  right: $toolbar-size - 6;
  bottom: -10px;
  width: 172px;
  @include opacity(0);
  @include transform-origin(95% 95%);
  @include scale(0.01);
  @include transition(all 1s)
}*/


$toolbar-size: 52px;
.toolbar {
  position: fixed;
  left: 50%;
  bottom: 5px;
  margin-left: -$toolbar-size / 2;
}

.toolbar-item {
  position: relative;
  display: block;
  width: $toolbar-size;
  height: $toolbar-size;
  margin-top: 1px;

  &:hover {
    .toolbar-icon {
      top: -$toolbar-size;
    }

    .toolbar-text {
      top: 0;
    }

    .toolbar-layer {
      @include opacity(1);
      @include scale(1);
    }
  }
}

.toolbar-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: $toolbar-size;
  height: $toolbar-size;
  overflow: hidden;
}

.toolbar-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: $toolbar-size;
  height: $toolbar-size;
  background-color: #d0d6d9;
  font-size: 30px;
  color: #fff;
  text-align: center;
  line-height: $toolbar-size;
  @include transition(top 1s);
}

.toolbar-text {
  position: absolute;
  left: 0;
  top: $toolbar-size;
  width: $toolbar-size;
  height: $toolbar-size;
  background-color: #98a1a6;
  padding-top: 12px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  @include transition(top 1s);
}

.toolbar-layer {
  position: absolute;
  right: $toolbar-size - 6;
  bottom: -10px;
  width: 172px;
  background-image: url(../../img/toolbar_img.png);
  background-repeat: no-repeat;
  @include opacity(0);
  @include transform-origin(95% 95%);
  @include scale(0.01);
  @include transition(all 1s);
}

.toolbar-layer-weixin {
  height: 212px;
  background-position: 0 0;
}

.toolbar-layer-app {
  height: 194px;
  background-position: 0 -222px;
}