@mixin icon {
    display: inline-block;
    background-size: 144px 80px;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-image: url('/static/images/sprite_common.png');
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
        background-image: url('/static/images/sprite_common@2x.png');
    }
}

@mixin kill-glyphicon {
    @include icon;
    &:before {
        content: none;
    }
}

.glyphicon-login {
    @include kill-glyphicon;
    width: 24px;
    height: 24px;
    background-position: -120px -32px;
}

.glyphicon-create-user {
    @include kill-glyphicon;
    width: 24px;
    height: 24px;
    background-position: -96px -32px;
}

.glyphicon-cloud {
    @include kill-glyphicon;
    width: 100%;
    height: 100%;
    background-position: -75px -135px;

    &.item-disabled {
        background-position: -99px -55px;
    }
}

.close-icon {
    @include icon;
    background-position: -32px 0;
}

.tag-close-icon {
    @include icon;
    background-position: -96px 0;
}

@mixin web-icon {
    display: inline-block;
    background-size: 192px 408px;
    background-image: url('/static/images/web_interface_sprite.png');
    @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
        background-image: url('/static/images/web_interface_sprite@2x.png');
    }
}

.web-icon-search {
    width: 20px !important;
    height: 20px !important;
}

// SVG's
svg-icon svg .error {
    stroke: none;
    fill: var(--card-simple-error-svg-color);
}
svg-icon[data-escape-global-style] svg .error {
    stroke: unset;
    fill: unset;
}

/* Spinner icon -> HTML: <div class="spinner"></div> */
.spinner {
    width: 20px;
    padding: 3px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--btn-close-bg);
    --mask: conic-gradient(#0000 10%, #000),
    linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--mask);
    -webkit-mask-composite: source-out;
    mask: var(--mask);
    mask-composite: subtract;
    animation: spinnerAnimation 1s infinite linear;
}

@keyframes spinnerAnimation {
    to {
        transform: rotate(1turn)
    }
}
