/* The module fills its column. The icon is only as big as its font-size, so without this it sits at the start of that box. */
.spruce_icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.spruce-icon {
    display: inline-flex;
    color: inherit;
    line-height: 0;
    /* The SVG is 1em. The size control sets this so the icon matches the chosen width. */
    font-size: 24px;
}

.spruce-icon svg {
    display: block;
    width: 1em;
    height: auto;
    aspect-ratio: 1;
}

.spruce-icon--stroke svg {
    fill: none;
    stroke: currentColor;
}

.spruce-icon--fill svg {
    fill: currentColor;
    stroke: none;
}

.spruce-icon--mixed svg {
    fill: currentColor;
    stroke: currentColor;
}