:root {
    /* https://flowbite.com/icons/ */

    --icon-mail: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'><path stroke='currentColor' stroke-linecap='round' stroke-width='2' d='m3.5 5.5 7.893 6.036a1 1 0 0 0 1.214 0L20.5 5.5M4 19h16a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1Z'/></svg>");

    --icon-history: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24' transform='scale(0.8)'><path stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M12 8v4l3 3M3.22302 14C4.13247 18.008 7.71683 21 12 21c4.9706 0 9-4.0294 9-9 0-4.97056-4.0294-9-9-9-3.72916 0-6.92858 2.26806-8.29409 5.5M7 9H3V5'/></svg>");

    --icon-close: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'><path stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 17.94 6M18 18 6.06 6'/></svg>");

    --icon-reload: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24' transform='scale(0.9)'><path stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='M17.651 7.65a7.131 7.131 0 0 0-12.68 3.15M18.001 4v4h-4m-7.652 8.35a7.13 7.13 0 0 0 12.68-3.15M6 20v-4h4'/></svg>");

    --icon-forward: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M17 6a1 1 0 1 0-2 0v4L8.6 5.2A1 1 0 0 0 7 6v12a1 1 0 0 0 1.6.8L15 14v4a1 1 0 1 0 2 0V6Z' clip-rule='evenodd'/></svg>");

    --icon-download: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'><path stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M4 15v2a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3v-2m-8 1V4m0 12-4-4m4 4 4-4'/></svg>");

    --icon-bookmark-fill-alt: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24' transform='scale(0.9)'><path d='M7.833 2c-.507 0-.98.216-1.318.576A1.92 1.92 0 0 0 6 3.89V21a1 1 0 0 0 1.625.78L12 18.28l4.375 3.5A1 1 0 0 0 18 21V3.889c0-.481-.178-.954-.515-1.313A1.808 1.808 0 0 0 16.167 2H7.833Z'/></svg>");

    --icon-bookmark-fill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24' transform='scale(0.75)'><path stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m17 21-5-4-5 4V3.889a.92.92 0 0 1 .244-.629.808.808 0 0 1 .59-.26h8.333a.81.81 0 0 1 .589.26.92.92 0 0 1 .244.63V21Z'/></svg>");

    --icon-bookmark-empty: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24' transform='scale(0.9, 0.8)'><path stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m17 21-5-4-5 4V3.889a.92.92 0 0 1 .244-.629.808.808 0 0 1 .59-.26h8.333a.81.81 0 0 1 .589.26.92.92 0 0 1 .244.63V21Z'/></svg>");

    --icon-heart-fill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24' transform='scale(0.8)'><path d='m12.75 20.66 6.184-7.098c2.677-2.884 2.559-6.506.754-8.705-.898-1.095-2.206-1.816-3.72-1.855-1.293-.034-2.652.43-3.963 1.442-1.315-1.012-2.678-1.476-3.973-1.442-1.515.04-2.825.76-3.724 1.855-1.806 2.201-1.915 5.823.772 8.706l6.183 7.097c.19.216.46.34.743.34a.985.985 0 0 0 .743-.34Z'/></svg>");

    --icon-heart-empty: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24' transform='scale(0.9)'><path stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12.01 6.001C6.5 1 1 8 5.782 13.001L12.011 20l6.23-7C23 8 17.5 1 12.01 6.002Z'/></svg>");

    --icon-play-fill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M8.6 5.2A1 1 0 0 0 7 6v12a1 1 0 0 0 1.6.8l8-6a1 1 0 0 0 0-1.6l-8-6Z' clip-rule='evenodd'/></svg>");

    --icon-pause-fill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M8 5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H8Zm7 0a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1Z' clip-rule='evenodd'/></svg>");

    --icon-cart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24' transform='scale(0.9)'><path fill-rule='evenodd' d='M4 4a1 1 0 0 1 1-1h1.5a1 1 0 0 1 .979.796L7.939 6H19a1 1 0 0 1 .979 1.204l-1.25 6a1 1 0 0 1-.979.796H9.605l.208 1H17a3 3 0 1 1-2.83 2h-2.34a3 3 0 1 1-4.009-1.76L5.686 5H5a1 1 0 0 1-1-1Z' clip-rule='evenodd'/></svg>");

    --icon-printer: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24' transform='scale(0.9)'><path fill-rule='evenodd' d='M8 3a2 2 0 0 0-2 2v3h12V5a2 2 0 0 0-2-2H8Zm-3 7a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h1v-4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v4h1a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2H5Zm4 11a1 1 0 0 1-1-1v-4h8v4a1 1 0 0 1-1 1H9Z' clip-rule='evenodd'/></svg>");

    --icon-grid-fill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24' transform='scale(0.9)'><path fill-rule='evenodd' d='M4.857 3A1.857 1.857 0 0 0 3 4.857v4.286C3 10.169 3.831 11 4.857 11h4.286A1.857 1.857 0 0 0 11 9.143V4.857A1.857 1.857 0 0 0 9.143 3H4.857Zm10 0A1.857 1.857 0 0 0 13 4.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 21 9.143V4.857A1.857 1.857 0 0 0 19.143 3h-4.286Zm-10 10A1.857 1.857 0 0 0 3 14.857v4.286C3 20.169 3.831 21 4.857 21h4.286A1.857 1.857 0 0 0 11 19.143v-4.286A1.857 1.857 0 0 0 9.143 13H4.857Zm10 0A1.857 1.857 0 0 0 13 14.857v4.286c0 1.026.831 1.857 1.857 1.857h4.286A1.857 1.857 0 0 0 21 19.143v-4.286A1.857 1.857 0 0 0 19.143 13h-4.286Z' clip-rule='evenodd'/></svg>");

    --icon-x-logo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24' transform='scale(0.8)'><path d='M13.795 10.533 20.68 2h-3.073l-5.255 6.517L7.69 2H1l7.806 10.91L1.47 22h3.074l5.705-7.07L15.31 22H22l-8.205-11.467Zm-2.38 2.95L9.97 11.464 4.36 3.627h2.31l4.528 6.317 1.443 2.02 6.018 8.409h-2.31l-4.934-6.89Z'/></svg>");

    --icon-instagram-logo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'><path fill='currentColor' fill-rule='evenodd' d='M3 8a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v8a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5V8Zm5-3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V8a3 3 0 0 0-3-3H8Zm7.597 2.214a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2h-.01a1 1 0 0 1-1-1ZM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6Zm-5 3a5 5 0 1 1 10 0 5 5 0 0 1-10 0Z' clip-rule='evenodd'/></svg>");

    --icon-twitter-logo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M22 5.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.343 8.343 0 0 1-2.605.981A4.13 4.13 0 0 0 15.85 4a4.068 4.068 0 0 0-4.1 4.038c0 .31.035.618.105.919A11.705 11.705 0 0 1 3.4 4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 6.1 13.635a4.192 4.192 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 2 18.184 11.732 11.732 0 0 0 8.291 20 11.502 11.502 0 0 0 19.964 8.5c0-.177 0-.349-.012-.523A8.143 8.143 0 0 0 22 5.892Z' clip-rule='evenodd'/></svg>");

    --icon-discord-logo: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor' viewBox='0 0 24 24'><path d='M18.942 5.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.586 11.586 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3 17.392 17.392 0 0 0-2.868 11.662 15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.638 10.638 0 0 1-1.706-.83c.143-.106.283-.217.418-.331a11.664 11.664 0 0 0 10.118 0c.137.114.277.225.418.331-.544.328-1.116.606-1.71.832a12.58 12.58 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM8.678 14.813a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.929 1.929 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z'/></svg>");
}

.btn {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 14pt;
    width: 14pt;
    background-color: currentColor;
    transition: transform 0.2s ease-out;
    pointer-events: all;
}

/* .btn:hover {
    transform: scale(1.25);
} */

@media (max-width:600px) {
    .btn {
        height: 12pt;
        width: 12pt;
    }
}

.mail-btn {
    -webkit-mask: var(--icon-mail) center / contain no-repeat;
    mask: var(--icon-mail) center / contain no-repeat;
}

.history-btn {
    -webkit-mask: var(--icon-history) center / contain no-repeat;
    mask: var(--icon-history) center / contain no-repeat;
}

.close-btn {
    -webkit-mask: var(--icon-close) center / contain no-repeat;
    mask: var(--icon-close) center / contain no-repeat;
}

.reload-btn {
    -webkit-mask: var(--icon-reload) center / contain no-repeat;
    mask: var(--icon-reload) center / contain no-repeat;
}

.forward-btn {
    -webkit-mask: var(--icon-forward) center / contain no-repeat;
    mask: var(--icon-forward) center / contain no-repeat;
}

.download-btn {
    -webkit-mask: var(--icon-download) center / contain no-repeat;
    mask: var(--icon-download) center / contain no-repeat;
}

.bookmark-fill-btn {
    -webkit-mask: var(--icon-bookmark-fill) center / contain no-repeat;
    mask: var(--icon-bookmark-fill) center / contain no-repeat;
}

.bookmark-empty-btn {
    -webkit-mask: var(--icon-bookmark-empty) center / contain no-repeat;
    mask: var(--icon-bookmark-empty) center / contain no-repeat;
}

.heart-fill-btn {
    -webkit-mask: var(--icon-heart-fill) center / contain no-repeat;
    mask: var(--icon-heart-fill) center / contain no-repeat;
}

.heart-empty-btn {
    -webkit-mask: var(--icon-heart-empty) center / contain no-repeat;
    mask: var(--icon-heart-empty) center / contain no-repeat;
}

.play-fill-btn {
    -webkit-mask: var(--icon-play-fill) center / contain no-repeat;
    mask: var(--icon-play-fill) center / contain no-repeat;
}

.pause-fill-btn {
    -webkit-mask: var(--icon-pause-fill) center / contain no-repeat;
    mask: var(--icon-pause-fill) center / contain no-repeat;
}

.cart-btn {
    -webkit-mask: var(--icon-cart) center / contain no-repeat;
    mask: var(--icon-cart) center / contain no-repeat;
}

.printer-btn {
    -webkit-mask: var(--icon-printer) center / contain no-repeat;
    mask: var(--icon-printer) center / contain no-repeat;
}

.grid-fill-btn {
    -webkit-mask: var(--icon-grid-fill) center / contain no-repeat;
    mask: var(--icon-grid-fill) center / contain no-repeat;
}

.x-logo-btn {
    -webkit-mask: var(--icon-x-logo) center / contain no-repeat;
    mask: var(--icon-x-logo) center / contain no-repeat;
}

.instagram-logo-btn {
    -webkit-mask: var(--icon-instagram-logo) center / contain no-repeat;
    mask: var(--icon-instagram-logo) center / contain no-repeat;
}

.twitter-logo-btn {
    -webkit-mask: var(--icon-twitter-logo) center / contain no-repeat;
    mask: var(--icon-twitter-logo) center / contain no-repeat;
}

.discord-logo-btn {
    -webkit-mask: var(--icon-discord-logo) center / contain no-repeat;
    mask: var(--icon-discord-logo) center / contain no-repeat;
}

.btn-disabled {
    opacity: 0.3;
    pointer-events: none;
}