:root {
    --site-icon-stroke: 1.85;
}

.site-icon {
    display: block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--site-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.site-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.site-icon--12 {
    width: 12px;
    height: 12px;
}

.site-icon--13 {
    width: 13px;
    height: 13px;
}

.site-icon--14 {
    width: 14px;
    height: 14px;
}

.site-icon--15 {
    width: 15px;
    height: 15px;
}

.site-icon--16 {
    width: 16px;
    height: 16px;
}

.site-icon--18 {
    width: 18px;
    height: 18px;
}

.site-icon--20 {
    width: 20px;
    height: 20px;
}

.site-link-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.site-link-with-icon .site-icon {
    transition: transform 0.18s ease;
}

.site-link-with-icon:hover .site-icon,
.site-link-with-icon:focus-visible .site-icon {
    transform: translateX(1px);
}

.site-link-with-icon--tight {
    gap: 0.35rem;
}