/* ===================================================
   ICONs
   =================================================== */
/* ── Icon base ────────────────────── */
.fans-icon {
    display: inline-block;
    -webkit-mask: no-repeat center;
    mask: no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ── Sizes ────────────────────────── */
.fans-icon-sm {
    width: 16px;
    height: 16px;
}

.fans-icon-md {
    width: 24px;
    height: 24px;
}

.fans-icon-lg {
    width: 32px;
    height: 32px;
}

.fans-icon-xlg {
    width: 172px;
    height: 172px;
}

/* ── Images ───────────────────────── */
.fans-icon-apple {
    -webkit-mask-image: url('/svg/apple.svg');
    mask-image: url('/svg/apple.svg');
    padding-right:10px;
}
.fans-icon-android {
    -webkit-mask-image: url('/svg/android.svg');
    mask-image: url('/svg/android.svg');
    padding-right: 10px;
}
.fans-icon-google {
    -webkit-mask-image: url('/svg/google.svg');
    mask-image: url('/svg/google.svg');
    padding-right: 10px;
}
.fans-icon-browser {
    -webkit-mask-image: url('/svg/browser-light.svg');
    mask-image: url('/svg/browser-light.svg');
    padding-right: 10px;
}
.fans-icon-mac {
    -webkit-mask-image: url('/svg/computer-classic-light.svg');
    mask-image: url('/svg/computer-classic-light.svg');
    padding-right: 10px;
}
.fans-icon-linux {
    -webkit-mask-image: url('/svg/linux.svg');
    mask-image: url('/svg/linux.svg');
    padding-right: 10px;
}
.fans-icon-windows {
    -webkit-mask-image: url('/svg/windows.svg');
    mask-image: url('/svg/windows.svg');
    padding-right: 10px;
}
.fans-icon-check-circle {
    -webkit-mask-image: url('/svg/check-circle.svg');
    mask-image: url('/svg/check-circle.svg');
    padding-right: 10px;
}
.fans-icon-info {
    -webkit-mask-image: url('/svg/info.svg');
    mask-image: url('/svg/info.svg');
    padding-right: 10px;
}
.fans-icon-dashboard {
    -webkit-mask-image: url('/svg/gauge-regular.svg');
    mask-image: url('/svg/gauge-regular.svg');
    padding-right: 10px;
}



.fans-icon-logo {
    -webkit-mask-image: url('/svg/fansaastic-logo.svg');
    mask-image: url('/svg/fansaastic-logo.svg');
}

/* ── Colors ───────────────────────── */
.fans-icon-white {
    background-color: #ffffff;
}

.fans-icon-black {
    background-color: #000000;
}

.fans-icon-danger {
    background-color: #dc3545;
}

.fans-icon-warning {
    background-color: #ffc107;
}

.fans-icon-success {
    background-color: #198754;
}

.fans-icon-muted {
    background-color: #6c757d;
}

.fans-icon-yellow {
    background-color: yellow
}

.fans-icon-spin {
    animation: spin 2s linear infinite;
    display: block;
}

/* optional: extra slow class you can add to elements when needed */
.fans-icon-spin--slow {
    animation-duration: 1.5s!important;
}

/* simple spin keyframes (clockwise) */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}