/* ═══════════════════════════════════════════════════════════════════════════
 * Icon utilities
 *
 * Bootstrap Icons is a plain icon font: it ships glyphs and nothing else.
 * Font Awesome bundled a handful of behaviours alongside its glyphs, and the
 * markup used four of them. They are reimplemented here so removing Font
 * Awesome did not quietly remove a spinning spinner along with it.
 *
 * Loaded on both the public and dashboard shells, immediately after the
 * bootstrap-icons stylesheet.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* fa-spin / fa-pulse. Used on 92 spinners. */
@keyframes et-icon-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.et-icon-spin {
    display: inline-block;
    animation: et-icon-spin 0.9s linear infinite;
}

/* Respect a reduced-motion preference: a spinner that cannot spin should at
   least not pretend to, and a frozen glyph still reads as "working". */
@media (prefers-reduced-motion: reduce) {
    .et-icon-spin {
        animation-duration: 2.4s;
    }
}

/* fa-fw — fixed width, so icons in a list column line up. */
.et-icon-fw {
    display: inline-block;
    width: 1.25em;
    text-align: center;
}

/* fa-xs / fa-sm / fa-lg / fa-2x */
.et-icon-xs { font-size: 0.75em; }
.et-icon-sm { font-size: 0.875em; }
.et-icon-lg { font-size: 1.25em; line-height: 0.75em; vertical-align: -0.075em; }
.et-icon-2x { font-size: 2em; }

/* fa-border */
.et-icon-border {
    padding: 0.2em 0.25em 0.15em;
    border: 0.08em solid currentColor;
    border-radius: 0.1em;
}

/* fa-flip-horizontal */
.et-icon-flip-h {
    display: inline-block;
    transform: scaleX(-1);
}

/* ── Brand marks with no Bootstrap glyph ──────────────────────────────────────
 * Eleven networks are not in Bootstrap Icons. They are drawn as a mask over a
 * local SVG so the mark takes currentColor and sits on the text baseline
 * exactly like a font glyph would. Previously only Wattpad worked this way and
 * only inside .et-public-site; the dashboard needs them too.
 */
.et-soc-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
}
.et-soc-icon--bitcoin {
    mask: url('/assets/images/icons/bitcoin.svg') center / contain no-repeat;
    -webkit-mask: url('/assets/images/icons/bitcoin.svg') center / contain no-repeat;
}
.et-soc-icon--dev {
    mask: url('/assets/images/icons/dev.svg') center / contain no-repeat;
    -webkit-mask: url('/assets/images/icons/dev.svg') center / contain no-repeat;
}
.et-soc-icon--ethereum {
    mask: url('/assets/images/icons/ethereum.svg') center / contain no-repeat;
    -webkit-mask: url('/assets/images/icons/ethereum.svg') center / contain no-repeat;
}
.et-soc-icon--goodreads {
    mask: url('/assets/images/icons/goodreads.svg') center / contain no-repeat;
    -webkit-mask: url('/assets/images/icons/goodreads.svg') center / contain no-repeat;
}
.et-soc-icon--hacker-news {
    mask: url('/assets/images/icons/hacker-news.svg') center / contain no-repeat;
    -webkit-mask: url('/assets/images/icons/hacker-news.svg') center / contain no-repeat;
}
.et-soc-icon--itch-io {
    mask: url('/assets/images/icons/itch-io.svg') center / contain no-repeat;
    -webkit-mask: url('/assets/images/icons/itch-io.svg') center / contain no-repeat;
}
.et-soc-icon--patreon {
    mask: url('/assets/images/icons/patreon.svg') center / contain no-repeat;
    -webkit-mask: url('/assets/images/icons/patreon.svg') center / contain no-repeat;
}
.et-soc-icon--product-hunt {
    mask: url('/assets/images/icons/product-hunt.svg') center / contain no-repeat;
    -webkit-mask: url('/assets/images/icons/product-hunt.svg') center / contain no-repeat;
}
.et-soc-icon--soundcloud {
    mask: url('/assets/images/icons/soundcloud.svg') center / contain no-repeat;
    -webkit-mask: url('/assets/images/icons/soundcloud.svg') center / contain no-repeat;
}
.et-soc-icon--tumblr {
    mask: url('/assets/images/icons/tumblr.svg') center / contain no-repeat;
    -webkit-mask: url('/assets/images/icons/tumblr.svg') center / contain no-repeat;
}
.et-soc-icon--wattpad {
    mask: url('/assets/images/icons/wattpad.svg') center / contain no-repeat;
    -webkit-mask: url('/assets/images/icons/wattpad.svg') center / contain no-repeat;
}