@import url('core/variables.css');
@import url('core/base.css');
@import url('layout/modals.css');
@import url('layout/browser-shell.css');
@import url('components/buttons.css');
@import url('components/inputs.css');
@import url('components/tabs.css');
@import url('components/settings.css');
@import url('components/home.css');
@import url('components/category-menu.css');
@import url('components/notifications.css');
@import url('components/bookmarks.css');
@import url('utilities/performance.css');
@import url('utilities/responsive.css');

/* Dynamic Logo Coloring */
.app-logo-img {
    width: 24px;
    height: 24px;
    background-color: var(--text-primary);
    -webkit-mask-image: url('../assets/logo.png');
    mask-image: url('../assets/logo.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    display: block;
    will-change: transform;
    transform-origin: center;
}

/* Ensure the logo can spin even if general animations are disabled for performance */
.app-logo-img.spin {
    animation: spin 1s cubic-bezier(0.6, 0.05, 0.4, 1.0) infinite !important;
}