.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.2em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;    

    /* Size utility classes if needed */
    &.icon--lg {
        width: 1.5em;
        height: 1.5em;
    }

    .icon--xl {
        width: 2em;
        height: 2em;
    }

    /* Button & flex centering helper */
    button > &,
    [role=button] > & {
        vertical-align: -0.125em;
    }

    /* Spacing when followed by sibling content */
    &:not(:last-child) {
        margin-right: 0.5em;
    }
}


.jam--download {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 24 24'%3E%3Cpath fill='black' d='m8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2'/%3E%3C/svg%3E");
}

.jam--message-f {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 24 24'%3E%3Cpath fill='black' d='M3 .565h14a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-6.958l-6.444 4.808A1 1 0 0 1 2 18.57v-4.006a2 2 0 0 1-2-2v-9a3 3 0 0 1 3-3z'/%3E%3C/svg%3E");
}

.jam--play {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -3 24 24'%3E%3Cpath fill='black' d='M13.82 9.523a.976.976 0 0 0-.324-1.363L3.574 2.128a1.03 1.03 0 0 0-.535-.149c-.56 0-1.013.443-1.013.99V15.03c0 .185.053.366.153.523c.296.464.92.606 1.395.317l9.922-6.031c.131-.08.243-.189.325-.317zm.746 1.997l-9.921 6.031c-1.425.867-3.3.44-4.186-.951A2.9 2.9 0 0 1 0 15.03V2.97C0 1.329 1.36 0 3.04 0c.567 0 1.123.155 1.605.448l9.921 6.032c1.425.866 1.862 2.696.975 4.088c-.246.386-.58.712-.975.952'/%3E%3C/svg%3E");
}

.jam--pause {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -3 24 24'%3E%3Cpath fill='black' d='M2 0h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2m0 2v14h2V2zm10-2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2m0 2v14h2V2z'/%3E%3C/svg%3E");
}

.jam--set-forward {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -3 24 24'%3E%3Cpath fill='%23000' d='M13.82 9.523a.976.976 0 0 0-.324-1.363L3.574 2.128a1.03 1.03 0 0 0-.535-.149c-.56 0-1.013.443-1.013.99V15.03c0 .185.053.366.153.523c.296.464.92.606 1.395.317l9.922-6.031c.131-.08.243-.189.325-.317zm.18 2.341l-9.355 5.687c-1.425.867-3.3.44-4.186-.951A2.9 2.9 0 0 1 0 15.03V2.97C0 1.329 1.36 0 3.04 0c.567 0 1.123.155 1.605.448L14 6.135V2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2zM16 2v14h2V2z'/%3E%3C/svg%3E");
}

.jam--forward {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -3 24 24'%3E%3Cpath fill='%23000' d='M13.49 17.31a1.966 1.966 0 0 1-2.814.182A2.05 2.05 0 0 1 10 15.966V2.034C10 .911 10.893 0 11.994 0c.573 0 1.118.251 1.496.69l6.012 6.966c.664.768.664 1.92 0 2.688zM11.994 2.034v13.932L18.006 9zM3.49 17.31a1.966 1.966 0 0 1-2.814.182A2.05 2.05 0 0 1 0 15.966V2.034C0 .911.893 0 1.994 0c.573 0 1.118.251 1.496.69l6.012 6.966c.664.768.664 1.92 0 2.688zM1.994 2.034v13.932L8.006 9z'/%3E%3C/svg%3E");
}

.jam--backward {
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -3 24 24'%3E%3Cpath fill='%23000' d='M16.51.69a1.966 1.966 0 0 1 2.814-.182c.43.386.676.942.676 1.526v13.932C20 17.089 19.107 18 18.006 18a1.98 1.98 0 0 1-1.496-.69l-6.012-6.966a2.065 2.065 0 0 1 0-2.688zm1.496 15.276V2.034L11.994 9zM6.51.69A1.966 1.966 0 0 1 9.324.508c.43.386.676.942.676 1.526v13.932C10 17.089 9.107 18 8.006 18a1.98 1.98 0 0 1-1.496-.69L.498 10.344a2.065 2.065 0 0 1 0-2.688zm1.496 15.276V2.034L1.994 9z'/%3E%3C/svg%3E");
}

.jam--shuffle {
      --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -3 24 24'%3E%3Cpath fill='black' d='M19.548 4.837L16.875 7.51a1 1 0 0 1-1.415-1.414L16.556 5H15.1a5.22 5.22 0 0 0-5.089 4.058A5.264 5.264 0 0 0 15.105 13h1.502l-1.147-1.147a1 1 0 0 1 1.415-1.414l2.828 2.828a1 1 0 0 1 .282.562a1.01 1.01 0 0 1-.437 1.008l-2.673 2.673a1 1 0 0 1-1.415-1.414L16.556 15h-1.451a7.26 7.26 0 0 1-6.114-3.34A7.22 7.22 0 0 1 2.901 15H1a1 1 0 0 1 0-2h1.901a5.22 5.22 0 0 0 5.06-3.936A5.26 5.26 0 0 0 2.836 5H1a1 1 0 1 1 0-2h1.836a7.26 7.26 0 0 1 6.143 3.387A7.22 7.22 0 0 1 15.1 3h1.508L15.46 1.853A1 1 0 1 1 16.875.439l2.828 2.828a1 1 0 0 1 .282.562a1.01 1.01 0 0 1-.437 1.008'/%3E%3C/svg%3E");
}

.ph--wwaveform-bold {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M60 96v64a12 12 0 0 1-24 0V96a12 12 0 0 1 24 0m28-76a12 12 0 0 0-12 12v192a12 12 0 0 0 24 0V32a12 12 0 0 0-12-12m40 32a12 12 0 0 0-12 12v128a12 12 0 0 0 24 0V64a12 12 0 0 0-12-12m40 32a12 12 0 0 0-12 12v64a12 12 0 0 0 24 0V96a12 12 0 0 0-12-12m40-16a12 12 0 0 0-12 12v96a12 12 0 0 0 24 0V80a12 12 0 0 0-12-12'/%3E%3C/svg%3E");
}

.jam--repeat {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -3 24 24'%3E%3Cpath fill='black' d='m11.774 15l1.176 1.176a1 1 0 0 1-1.414 1.414l-2.829-2.828a1 1 0 0 1 0-1.414l2.829-2.829a1 1 0 0 1 1.414 1.415L11.883 13H14a4 4 0 1 0 0-8a1 1 0 0 1 0-2a6 6 0 1 1 0 12zM8.273 3L7.176 1.904A1 1 0 0 1 8.591.489l2.828 2.829a1 1 0 0 1 0 1.414L8.591 7.56a1 1 0 0 1-1.415-1.414L8.323 5H6a4 4 0 1 0 0 8a1 1 0 0 1 0 2A6 6 0 1 1 6 3z'/%3E%3C/svg%3E");
}