.wp-block-post-terms.is-style-icon-only {
    list-style: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

.wp-block-post-terms.is-style-icon-only li {
    margin: 20px 0 0 20px !important;
    padding: 0;
    display: inline-block;
}

.wp-block-post-terms.is-style-icon-only a {
    font-size: 10px;
    line-height: 0.5;
}

/*
 * Every term icon SVG is a filled background rect plus white (#fff) symbol
 * paths, but each file bakes in its own background colour (#4e698d,
 * #002f6c, #e99251 or currentColor). Target that structure rather than
 * element IDs so all icons match: muted blue with a white symbol at rest,
 * regular tan with a contrast-navy symbol on hover/focus (same as the team
 * mini icons). People.svg also has an unfilled bounding rect (fill="none"),
 * which is skipped.
 */
.wp-block-post-terms.is-style-icon-only li .taxonomy-icon-svg rect:not([fill="none"]) {
    fill: var(--wp--preset--color--additional-2) !important;
    transition: fill 0.2s ease;
}

.wp-block-post-terms.is-style-icon-only li .taxonomy-icon-svg path[fill="#fff"] {
    fill: var(--wp--preset--color--base) !important;
    transition: fill 0.2s ease;
}

.wp-block-post-terms.is-style-icon-only li .taxonomy-icon-svg:hover rect:not([fill="none"]),
.wp-block-post-terms.is-style-icon-only li a:focus-visible .taxonomy-icon-svg rect:not([fill="none"]) {
    fill: var(--wp--preset--color--accent) !important;
}

.wp-block-post-terms.is-style-icon-only li .taxonomy-icon-svg:hover path[fill="#fff"],
.wp-block-post-terms.is-style-icon-only li a:focus-visible .taxonomy-icon-svg path[fill="#fff"] {
    fill: var(--wp--preset--color--contrast) !important;
}