.icon-block {
    display: block;
    --icon-block--max-width: initial;
    --icon-block--ratio-numerator: 1; /* Not yet implemented */
    --icon-block--ratio-denominator: 1; /* Not yet implemented */
    --icon-block--padding: 0;
    --icon-block--background-color: initial;
    --icon-block--fill: initial;
    --icon-block--stroke: initial; /* Not yet implemented */
    --icon-block--border-radius: initial;
    --icon-block--rotation: initial;
}
.icon-block--align-left > * {
    margin-right: auto;
}
.icon-block--align-right > * {
    margin-left: auto;
}
.icon-block--align-center > * {
    margin-right: auto;
    margin-left: auto;
}
.svg-max-width-wrapper {
    box-sizing: border-box;
    max-width: var(--icon-block--max-width, initial);
    padding: var(--icon-block--padding, 0);
    background-color: var(--icon-block--background-color, initial);
    border-radius: var(--icon-block--border-radius, initial);
}
.svg-ratio-wrapper {
    position: relative;
    height: 0;
    padding-top: calc(
      var(--icon-block--ratio-numerator, 1) / var(--icon-block--ratio-denominator, 1) * 100%
    );
}
.icon-block svg {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(var(--icon-block--rotation, initial));
}
.icon-block--custom-fill svg {
    fill: var(--icon-block--fill);
}
.icon-block--custom-stroke svg {
    stroke: var(--icon-block--stroke);
}