/* Base */

.icon {
    display: inline-block;
    background-size: contain;
}

/* Sizes */

.icon13 {
    width: 13px;
    height: 13px;
}
.icon16 {
    width: 16px;
    height: 16px;
}
.icon20 {
    width: 20px;
    height: 20px;
}
.icon24 {
    width: 24px;
    height: 24px;
}
.icon32 {
    width: 32px;
    height: 32px;
}

/* Icons */

.icon__arrow-up, .icon__arrow-down, .icon__arrow-left, .icon__arrow-right {
    background-image: url(../images/icons/arrow-up.svg);
}
.icon__arrow-down {
    transform: rotate(180deg);
}
.icon__arrow-right {
    transform: rotate(90deg);
}
.icon__arrow-left {
    transform: rotate(270deg);
}
.icon__bluesky {
    background-image: url(../images/icons/brand-bluesky.svg);
    filter: invert(40%) sepia(94%) saturate(5203%) hue-rotate(197deg) brightness(104%) contrast(101%);
}
.icon__close {
    background-image: url(../images/icons/x.svg);
}
.icon__map-pin {
    background-image: url(../images/icons/map-pin.svg);
}
.icon__menu {
    background-image: url(../images/icons/menu-2.svg);
}
.icon__search {
    background-image: url(../images/icons/search.svg);
}
.icon__website {
    background-image: url(../images/icons/world-www.svg);
}
.icon__facebook {
    background-image: url(../images/icons/brand-facebook.svg);
    filter: invert(30%) sepia(98%) saturate(2347%) hue-rotate(204deg) brightness(96%) contrast(98%);
}
.icon__x {
    background-image: url(../images/icons/brand-x.svg);
}
.icon__instagram {
    position: relative;
    z-index: 1;
}
.icon__instagram::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/icons/brand-instagram.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask: url('../images/icons/brand-instagram.svg') no-repeat center / contain;
    mask: url('../images/icons/brand-instagram.svg') no-repeat center / contain;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    z-index: -1;
}
.icon__spotify {
    background-image: url(../images/icons/brand-spotify.svg);
    filter: invert(58%) sepia(77%) saturate(2258%) hue-rotate(122deg) brightness(95%) contrast(87%);
}
.icon__linkedin {
    background-image: url(../images/icons/brand-linkedin.svg);
    filter: invert(29%) sepia(58%) saturate(2617%) hue-rotate(197deg) brightness(93%) contrast(101%);
}
.icon__tiktok {
    background-image: url(../images/icons/brand-tiktok.svg);
}
.icon__apple_podcasts {
    background-image: url(../images/icons/brand-apple-podcast.svg);
    filter: invert(23%) sepia(57%) saturate(3438%) hue-rotate(284deg) brightness(87%) contrast(93%);
}
.icon__threads {
    background-image: url(../images/icons/brand-threads.svg);
}
.icon__medium {
    background-image: url(../images/icons/brand-medium.svg);
}
.icon__discord {
    background-image: url(../images/icons/brand-discord.svg);
    filter: invert(41%) sepia(63%) saturate(6619%) hue-rotate(226deg) brightness(101%) contrast(101%);
}
.icon__whatsapp {
    background-image: url(../images/icons/brand-whatsapp.svg);
    filter: invert(69%) sepia(74%) saturate(1312%) hue-rotate(101deg) brightness(96%) contrast(88%);
}
.icon__youtube {
    background-image: url(../images/icons/brand-youtube.svg);
    filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

/* Loaders */

.icon__spinner {
    border-radius: 50%;
    background: radial-gradient(farthest-side,#ffffff 94%,#0000) top / 3px 3px no-repeat,
    conic-gradient(#0000 30%,#ffffff);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 2px),#000 0);
    animation: icon-spinner .8s infinite linear;
}
.icon__spinner.show {
    display: inline-block !important;
}

@keyframes icon-spinner {
    100% {
        transform: rotate(1turn);
    }
}