/*General classes*/
.pwx-icon {
    display: block;
    width: 32px;
    height: 32px;
    position: relative;
  }

  .pwx-icon::before {
    /* Icon positioning related code */
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    pointer-events: none;
    /* this allows optical centering if required */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* Making sure the image files the whole element */
    mask-repeat: no-repeat;
    mask-size: 100%;
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
  }

  .pwx-icon-s {
    width: 16px;
    height: 16px;
  }

  .pwx-icon-m {
    width: 32px;
    height: 32px;
  }

  .pwx-icon-l {
    width: 48px;
    height: 48px;
  }

  .pwx-icon-xl {
    width: 256px;
    height: 256px;
  }

  .pwx-icon-faded{
    filter: brightness(0) saturate(100%) invert(76%) sepia(5%) saturate(33%) hue-rotate(322deg) brightness(85%) contrast(83%);
  }

  .pwx-icon-color-success::before {
    background-color: #24AA03;
  }

  .pwx-icon-acoustic-drumset::before {
    mask-image: url("../icons/custom/acoustic-drumset.svg");
    -webkit-mask-image: url("../icons/custom/acoustic-drumset.svg");
  }

  .pwx-icon-electric-drumset::before {
    mask-image: url("../icons/custom/electronic-drumkit.svg");
    -webkit-mask-image: url("../icons/custom/electronic-drumkit.svg");
  }

  .pwx-icon-double-bass-drum::before {
    mask-image: url("../icons/custom/double-bass-pedal.svg");
    -webkit-mask-image: url("../icons/custom/double-bass-pedal.svg");
  }

  .pwx-icon-headphones::before {
    mask-image: url("../icons/custom/headphones.svg");
    -webkit-mask-image: url("../icons/custom/headphones.svg");
  }

  .pwx-icon-hearing-protection::before {
    mask-image: url("../icons/custom/protection.svg");
    -webkit-mask-image: url("../icons/custom/protection.svg");
  }

  .pwx-icon-metronome::before {
    mask-image: url("../icons/custom/metronome.svg");
    -webkit-mask-image: url("../icons/custom/metronome.svg");
  }

  .pwx-icon-drumsticks::before {
    mask-image: url("../icons/custom/drumsticks.svg");
    -webkit-mask-image: url("../icons/custom/drumsticks.svg");
  }

  .pwx-icon-brushes::before {
    mask-image: url("../icons/custom/brushes.svg");
    -webkit-mask-image: url("../icons/custom/brushes.svg");
  }

  .pwx-icon-practise-pad::before {
    mask-image: url("../icons/custom/practice-pad.svg");
    -webkit-mask-image: url("../icons/custom/practice-pad.svg");
  }

  .pwx-icon-music-stand::before {
    mask-image: url("../icons/custom/music-stand.svg");
    -webkit-mask-image: url("../icons/custom/music-stand.svg");
  }