@import '../../variables';
@import '../../mixins';

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

  &:hover {
    @include svg-icon-shadow;
  }

  &.#{$prefix}-muted {
    .#{$prefix}-ui-icon {
      background-image: svg-load('../../assets/images/volume-mute.svg', fill=$color-icon);
    }
  }

  &.#{$prefix}-unmuted {
    &[data-#{$prefix}-volume-level-tens='0'] {
      .#{$prefix}-ui-icon {
        background-image: svg-load('../../assets/images/volume-mute.svg', fill=$color-icon);
      }
    }

    &[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'] {
      .#{$prefix}-ui-icon {
        background-image: svg-load('../../assets/images/volume-low.svg', fill=$color-icon);
      }
    }

    &[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'] {
      .#{$prefix}-ui-icon {
        background-image: svg-load('../../assets/images/volume.svg', fill=$color-icon);
      }
    }
  }
}