/* Low specificity keeps existing flex, grid and responsive navigation layouts in charge. */
:where(a.has-action-icon:not([hidden]), button.has-action-icon:not([hidden])) {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
}

svg.ui-icon {
    display: inline-block;
    box-sizing: content-box;
    width: var(--ui-icon-size, 1.1em);
    height: var(--ui-icon-size, 1.1em);
    inline-size: var(--ui-icon-size, 1.1em);
    block-size: var(--ui-icon-size, 1.1em);
    min-width: 0;
    min-inline-size: 0;
    max-width: var(--ui-icon-size, 1.1em);
    max-inline-size: var(--ui-icon-size, 1.1em);
    flex: 0 0 var(--ui-icon-size, 1.1em);
    vertical-align: -0.15em;
    overflow: visible;
    color: inherit;
    pointer-events: none;
}

[data-icon] > svg.ui-icon:only-child {
    vertical-align: middle;
}