:block(spin):mod(theme islands) {
    position: absolute;

    display: inline-block;
    visibility: hidden;

    box-sizing: border-box;

    $borderWidth: 2px;
    border: $borderWidth solid transparent;
    border-radius: 50%;

    &:after {
        content: '\00A0';
    }

    &:block(spin):mod(visible) {
        position: relative;

        visibility: visible;

        animation: spin_theme_islands 1s infinite linear;

        background: 0 0 no-repeat url(spin_theme_islands.gif);

        /* `1deg` is needed to prevent FF bug after minification (`0deg` => `0`) */
        background: linear-gradient(1deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));

        backface-visibility: hidden; /* Accelerate animation */
    }

    $bgShift: -$borderWidth;

    @each $size, $val in
    (xs,   s,     m,     l,     xl),  /* size */
    (16px, 24px,  28px,  32px,  38px) /* val */ {
        &:block(spin):mod(size $size) {
            line-height: $val;

            width: $val;
            height: $val;

            background-position: -$(borderWidth) $bgShift;
        }

        $bgShift: calc($bgShift - ($val + 1));
    }
}

@keyframes spin_theme_islands {
    from {
        border-top-color: #fc0;
        border-left-color: #fc0;
        transform: rotate(0);
    }
    to {
        border-top-color: #fc0;
        border-left-color: #fc0;
        transform: rotate(360deg);
    }
}
