:root {
    --akf-icon-color: #0c3952;
    --akf-icon-muted: #4d6472;
    --akf-icon-surface: rgba(8, 88, 115, 0.08);
    --akf-icon-border: rgba(8, 88, 115, 0.18);
}

html[data-theme="public-original"],
html[data-theme="akf-dark"] {
    --akf-icon-color: #dff8ff;
    --akf-icon-muted: #9cc5d3;
    --akf-icon-surface: rgba(83, 205, 215, 0.10);
    --akf-icon-border: rgba(83, 205, 215, 0.22);
}

.akf-icon,
[data-akf-icon] {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    vertical-align: -0.25em;
    color: currentColor;
    overflow: visible;
}

.akf-icon--xs { width: 1rem; height: 1rem; }
.akf-icon--sm { width: 1.125rem; height: 1.125rem; }
.akf-icon--md { width: 1.5rem; height: 1.5rem; }
.akf-icon--lg { width: 2rem; height: 2rem; }
.akf-icon--xl { width: 3rem; height: 3rem; }
.akf-icon--inline { margin-inline-end: 0.5rem; }

.akf-role-icon {
    display: inline-grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-width: 2.75rem;
    min-height: 2.75rem;
    color: var(--akf-icon-color);
    background:
        radial-gradient(circle at 75% 18%, rgba(66, 190, 213, 0.16), transparent 38%),
        linear-gradient(145deg, var(--akf-icon-surface), transparent);
    border: 1px solid var(--akf-icon-border);
    border-radius: inherit;
}

.akf-role-icon > svg {
    width: clamp(1.75rem, 48%, 4rem);
    height: clamp(1.75rem, 48%, 4rem);
    color: currentColor;
}

.akf-icon-button {
    display: inline-grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.akf-icon-button:focus-visible {
    outline: 3px solid rgba(25, 155, 194, 0.42);
    outline-offset: 2px;
}

@media (forced-colors: active) {
    .akf-role-icon { border: 1px solid CanvasText; }
}