@layer base, components;

@layer base {
    @keyframes icon-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .svg-sprite {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
        pointer-events: none;
    }
}

@layer components {
    .btn__icon-wrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        line-height: var(--leading-none);
    }

    .btn__icon {
        display: block;
        width: var(--btn-icon-size);
        height: var(--btn-icon-size);
        fill: currentColor;
        flex-shrink: 0;
    }

    .icon-inline.svg-sprite {
        position: static;
        display: inline-block;
        width: 1em;
        height: 1em;
        overflow: visible;
        flex: 0 0 auto;
        vertical-align: -0.125em;
        fill: currentColor;
        pointer-events: none;
    }

    .icon-inline--before {
        margin-right: var(--space-4);
    }

    .icon-inline--after {
        margin-left: var(--space-4);
    }

    .archive-display__icon--grid {
        display: none;
    }

    [display="display-2"] .archive-header-right .archive-display__icon--list {
        display: none;
    }

    [display="display-2"] .archive-header-right .archive-display__icon--grid {
        display: inline-block;
    }

    .loader__icon.svg-sprite {
        position: static;
        display: inline-block;
        width: 2rem;
        height: 2rem;
        overflow: visible;
        fill: currentColor;
        animation: icon-spin 1s linear infinite;
    }

    .content-ubb-icon.svg-sprite,
    .btn__icon.svg-sprite,
    .content-ubb-list__icon.svg-sprite,
    .content-ubb-quote__icon.svg-sprite,
    .content-ubb-copyright__icon.svg-sprite,
    .content-ubb-spoiler-header__icon.svg-sprite,
    .content-ubb-button__icon.svg-sprite,
    .content-ubb-carrousel-button__icon.svg-sprite,
    .content-ubb-stars .icon.svg-sprite {
        position: static;
        display: inline-block;
        width: 1em;
        height: 1em;
        overflow: visible;
        flex: 0 0 auto;
        vertical-align: -0.125em;
        fill: currentColor;
        pointer-events: none;
    }

    .site-header__nav-toggle-icon {
        width: var(--space-16);
        height: var(--space-16);
        transition: transform .2s ease;
    }

    .site-header__dropdown[data-state="open"] .site-header__nav-toggle-icon,
    .site-header__nav-toggle[aria-expanded="true"] .site-header__nav-toggle-icon,
    .site-header__toggle--account[aria-expanded="true"] .site-header__nav-toggle-icon {
        transform: rotate(180deg);
    }

    .site-header__toggle--icon .svg-sprite,
    .site-header__toggle--account .svg-sprite {
        position: static;
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        overflow: visible;
        flex: 0 0 var(--space-16);
        fill: currentColor;
    }

    .navigation-theme-button__svg {
        display: block;
        width: var(--space-18);
        height: var(--space-18);
    }

    .site-header__nav-link .svg-sprite {
        position: static;
        display: block;
        width: var(--space-16);
        height: var(--space-16);
        overflow: visible;
        fill: currentColor;
        flex: 0 0 auto;
    }

    .site-header__nav-toggle-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        line-height: var(--leading-none);
    }

    .site-header__account-preview .site-header__nav-toggle-icon {
        margin-right: var(--space-6);
    }

    .site-header__nav-toggle-icon .svg-sprite {
        position: static;
        display: block;
        width: var(--space-16);
        height: var(--space-16);
        overflow: visible;
        fill: currentColor;
        flex: 0 0 auto;
    }

    .site-header__nav-toggle-icon .svg-sprite use {
        fill: currentColor;
    }
}