/* Icons */

body.ready i.icon:not(.no-transition) {
    transition: var(--transition);
}

i.icon {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    font-style: normal;
    width: 32px;
    height: 32px;
}

i.icon.tiny {
    width: 16px;
    height: 16px;
}

i.icon.mini {
    width: 18px;
    height: 18px;
}

i.icon.small {
    width: 22px;
    height: 22px;
}

i.icon.medium {
    width: 32px;
    height: 32px;
}

i.icon.large {
    width: 48px;
    height: 48px;
}

i.icon.huge {
    width: 64px;
    height: 64px;
}

i.icon.default.flag {
    height: auto !important;
}

i.icon.default.flag-4x3 {
    aspect-ratio: 4 / 3;
}

i.icon:not(.default) svg,
i.icon:not(.default) svg path {
    fill: currentColor;
}

i.icon svg {
    width: 100%;
    height: 100%;
}

i.icon svg.fill,
i.icon svg.fill path {
    fill: currentColor;
}

i.icon svg.stroke,
i.icon svg.stroke path {
    stroke: currentColor;
}