/* Shared proportions for action icons across Battery Passport pages. */
button svg,
.nav-link > svg,
a:has(> svg:only-child) > svg {
    width: 1rem !important;
    height: 1rem !important;
    flex: 0 0 1rem;
    opacity: .76 !important;
    transition: opacity .15s ease;
}

button:has(svg),
.nav-link,
a:has(> svg:only-child) {
    min-width: 2.25rem;
    min-height: 2.25rem;
}

button:has(svg):hover svg,
button:has(svg):focus-visible svg,
.nav-link:hover > svg,
.nav-link:focus-visible > svg,
a:has(> svg:only-child):hover > svg,
a:has(> svg:only-child):focus-visible > svg {
    opacity: 1 !important;
}

/* Text glyphs used as action icons (for example, × and ›). */
button[aria-label]:not(:has(svg)),
.bp-icon-glyph {
    color: var(--bp-muted, #94a3b8);
    font-size: 1rem !important;
    line-height: 1;
    transition: color .15s ease;
}

button[aria-label]:not(:has(svg)):hover,
button[aria-label]:not(:has(svg)):focus-visible,
.bp-icon-glyph:hover,
.bp-icon-glyph:focus-visible {
    color: var(--bp-fg, #e2e8f0);
}

button:has(> svg:only-child),
a:has(> svg:only-child) {
    box-sizing: border-box;
    padding: .5rem;
}

button:has(> svg):focus-visible,
.nav-link:focus-visible,
a:has(> svg:only-child):focus-visible {
    outline: 2px solid var(--bp-accent);
    outline-offset: 2px;
}

button:has(> svg:only-child) + button:has(> svg:only-child),
a:has(> svg:only-child) + a:has(> svg:only-child) {
    margin-inline-start: .125rem;
}