.btn-zoomsounds {
  padding: 7px 10px;
  border-radius: 3px;
  line-height: 1;
  white-space: nowrap;

  margin-right: 5px;
  font-weight: bold;

  color: #222222;

  a {
    color: $color_text;
  }

  text-decoration: none;

  font-size: 13px;

  cursor: pointer;
  position: relative;

  &.disabled {
    pointer-events: none;
    opacity: 0.8;
  }

  .tooltip-indicator {
    color: inherit;
  }

  &:before, > .the-bg {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: $color_bg;
    border-radius: 4px;

    transform: scale(1);

    $transition-property: transform;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);

  }


  $transition-property: color, background, border;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;

  @include apply_transition($transition-property, $transition-duration, $transition-timing);

  > * {
  }

  .the-icon, .the-label, .btn-label {

    display: inline-block;
    vertical-align: middle;
    position: relative;

    line-height: 20px;
  }
  .the-icon{
    font-size: 16px;
  }

  .the-label, .btn-label {
    font-size: 12px;
    font-weight: bold;
  }

  .the-icon, .tooltip-indicator > .the-icon {
    margin-right: 6px;

    > svg {
      display: block;

      path, polygon, polyline {
        fill: #444;

        $transition-property: fill;
        $transition-duration: 0.3s;
        $transition-timing: ease-out;

        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }
    }
  }

  .show-on-active {
    display: none;
  }
}

html[dir=rtl] {
  .extra-html i + .the-number {
    margin-left: 0;
    margin-right: 5px;
  }

  .btn-zoomsounds > .the-icon {
    margin-right: 0;
    margin-left: 6px;
  }
}

.btn-zoomsounds.btn-itunes {
  color: #ffffff;

  &:before {
    background-color: #4e7596;
  }
}

.btn-zoomsounds:hover {

  &:before {
    transform: scale(.93);
  }
}

.btn-zoomsounds.btn-like:hover, .btn-zoomsounds.btn-like.active {
  .the-icon {
    > svg {
      path {
        fill: $color_highlight;
      }
    }
  }
}

.btn-zoomsounds.btn-like.active {
  color: #aaaaaa;
}

.btn-zoomsounds.active {
  .hide-on-active {
    display: none;
  }

  .show-on-active {
    display: inline-block;
  }
}

a.btn-zoomsounds, span.btn-zoomsounds {
  display: inline-block;
  text-decoration: none;
}

.con-playpause-con {
  white-space: nowrap;
}



.player-but, .player-but-no-style {


  cursor: pointer;

  display: inline-block;
  position: relative;

  vertical-align: middle;


  & + * {

    margin-left: 5px;
  }
}





.player-but {
  $size: 28px;
  width: $size;
  height: $size;

  color: $color_player_but;

  > a {
    color: $color_player_but;
  }

  background-color: transparent;

  font-size: 12px;


  &:hover, &.active {

    color: $color_player_but;
  }

  &.active {
    .the-icon-bg {
      border-color: #905555;
    }
  }

  &.player-but--square {
    > .the-icon-bg {
      border-radius: 0;
    }
  }

  & + .curr-time {
    margin-left: 10px;
  }

  .the-icon-bg {

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;


    border-radius: 50%;

    transform: translate3d(0%, 0%, 0) scale(1);


    transform: translate3d(0%, 0%, 0) scale(1);


    $transition-property: transform, border;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  svg.svg-icon {

    width: 15px;
    height: 15px;
  }

  .svg-icon {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scale(1);


    $transition-property: transform;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;
    @include apply_transition($transition-property, $transition-duration, $transition-timing);

  }

  &:hover, &.active {
    .the-icon-bg {

      transform: translate3d(0%, 0%, 0) scale(0.9);
      -webkit-transform: translate3d(0%, 0%, 0) scale(0.9);
    }

    svg.svg-icon {
      transform: translate3d(-50%, -50%, 0) scale(1.1);
      -webkit-transform: translate3d(-50%, -50%, 0) scale(1.1);
    }
  }

  .extrahtml-in-float-right + .player-but {
    margin-left: 5px;
  }

  .controls-volume + .extrahtml-in-float-right {
    margin-left: 5px;
  }
}