.#{$prefix}-ui-volumetogglebutton {
  @extend %ui-button;

  background-image: url('../../assets/skin-legacy/images/components/normal/volume_high.png');

  &:hover {
    background-image: url('../../assets/skin-legacy/images/components/hover/volume_high.png');
  }

  &.#{$prefix}-low {
    background-image: url('../../assets/skin-legacy/images/components/normal/volume_low.png');

    &:hover {
      background-image: url('../../assets/skin-legacy/images/components/hover/volume_low.png');
    }
  }

  &.#{$prefix}-on {
    background-image: url('../../assets/skin-legacy/images/components/normal/volume_muted.png');

    &:hover {
      background-image: url('../../assets/skin-legacy/images/components/hover/volume_muted.png');
    }
  }
}

.#{$prefix}-ui-volumetogglebutton {
  @extend %ui-button;

  &.#{$prefix}-muted {
    background-image: url('../../assets/skin-legacy/images/components/normal/volume_muted.png');

    &:hover {
      background-image: url('../../assets/skin-legacy/images/components/hover/volume_muted.png');
    }
  }

  &.#{$prefix}-unmuted {
    &[data-#{$prefix}-volume-level-tens='0'] {
      background-image: url('../../assets/skin-legacy/images/components/normal/volume_muted.png');

      &:hover {
        background-image: url('../../assets/skin-legacy/images/components/hover/volume_muted.png');
      }
    }

    &[data-#{$prefix}-volume-level-tens='1'],
    &[data-#{$prefix}-volume-level-tens='2'],
    &[data-#{$prefix}-volume-level-tens='3'],
    &[data-#{$prefix}-volume-level-tens='4'],
    &[data-#{$prefix}-volume-level-tens='5'] {
      background-image: url('../../assets/skin-legacy/images/components/normal/volume_low.png');

      &:hover {
        background-image: url('../../assets/skin-legacy/images/components/hover/volume_low.png');
      }
    }

    &[data-#{$prefix}-volume-level-tens='6'],
    &[data-#{$prefix}-volume-level-tens='7'],
    &[data-#{$prefix}-volume-level-tens='8'],
    &[data-#{$prefix}-volume-level-tens='9'],
    &[data-#{$prefix}-volume-level-tens='10'] {
      background-image: url('../../assets/skin-legacy/images/components/normal/volume_high.png');

      &:hover {
        background-image: url('../../assets/skin-legacy/images/components/hover/volume_high.png');
      }
    }
  }
}

Fix VolumeToggleButton legacy skin style
Fix VolumeToggleButton legacy skin style
