@mixin hover {
  display: block !important;
  opacity: 1;
  height: 112px;
  padding: 6px;
  &:before {
    height: 14px;
  }
}

.control-button-container {
  &.control-volume,
  &.volume-control {
    display: inline-block !important;

    &.hover {
      .volume-control-bar {
        @include hover;
      }
    }

    &.is-muted {
      .icon-volume-waves {
        opacity: 0;
        -webkit-transform: translateX(-5px);
        -ms-transform: translateX(-5px);
        transform: translateX(-5px);
      }

      .icon-volume-mute {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
      }
    }

    &.dragging-active {
      .volume-control-bar {
        @include hover;
      }
    }

    .volume-button {
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 2px;
      height: 2px;
      background: transparent;
    }

    .icon-volume-waves {
      -webkit-transform: translateX(0px);
      -ms-transform: translateX(0px);
      transform: translateX(0px);
    }

    .icon-volume-mute {
      opacity: 1;
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
    }

    .icon-volume-waves,
    .icon-volume-mute {
      transition:
        300ms transform,
        300ms opacity;
    }

    i {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

.volume-control-bar {
  position: absolute;
  z-index: 2;
  bottom: 38px;
  left: 0;
  height: 0px;
  width: 34px;
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
  background-color: #333333;
  padding: 0px;
  opacity: 0;

  &:before {
    position: absolute;
    width: 34px;
    height: 0px;
    bottom: -8px;
    left: 0;
    content: ' ';
    display: block;
  }

  .bar {
    background-color: #424242;
    height: 100%;
    position: relative;
    cursor: pointer;
  }

  .progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 0 0 2px 2px;
    background-color: $tone-1-color;
  }
}

.player {
  &.smart-container-open {
    .control-button-container {
      &.control-volume,
      &.volume-control {
        &.hover {
          .control-volume-bar {
            display: none !important;
          }
        }
      }
    }
  }
}

.size-ty {
  .control-button-container {
    &.control-volume,
    &.volume-control {
      &.hover {
        .control-volume-bar {
          display: none !important;
        }
      }
    }
  }
}

.touch {
  .control-button-container {
    &.control-volume,
    &.volume-control {
      &.hover {
        .control-volume-bar {
          display: none !important;
        }
      }
    }
  }
}