.psv-navbar .zoom-button {
  cursor: default;
  width: #{$zoom-buttons-width * 3 + $zoom-range-width};

  .minus, .plus {
    float: left;
    position: relative;
    cursor: pointer;
    width: $zoom-buttons-width;
    height: $zoom-buttons-width;

    svg {
      position: relative;
      top: 20%;
    }
  }

  .range {
    float: left;
    padding: #{($buttons-height - $zoom-range-tickness) / 2} #{$zoom-buttons-width / 2};

    .line {
      position: relative;
      cursor: pointer;
      width: $zoom-range-width;
      height: $zoom-range-tickness;
      background: $buttons-color;
      transition: all 0.3s ease;
    }

    .handle {
      position: absolute;
      border-radius: 50%;
      top: #{($zoom-range-tickness - $zoom-disk-diameter) / 2};
      width: $zoom-disk-diameter;
      height: $zoom-disk-diameter;
      background: $buttons-color;
      transform: scale(1);
      transition: transform 0.3s ease;
    }
  }

  &:hover {
    .range {
      .line {
        box-shadow: 0 0 2px $buttons-color;
      }
      .handle {
        transform: scale(1.3);
      }
    }
  }
}