/*
 * Classic theme skin. The monochrome line icons that used to live here are now
 * the app-wide default (components/icons.css) so every theme — including
 * runtime custom ones — inherits them; this file keeps only what is uniquely
 * classic. The icon files still live in themes/classic/.
 */

/* Navbar brand carries the favicon mark so tab icon and logo match */
[data-theme="classic"] .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

[data-theme="classic"] .navbar-brand::before {
    content: "";
    width: 24px;
    height: 24px;
    flex: none;
    background: url("/static/themes/classic/favicon.svg") center / contain no-repeat;
}

/* Animated translucent stripes over the accent fill while a job runs
   (the classic Bootstrap progress treatment). Both gradient layers are
   restated because background-image is a single property: stripes on top,
   the accent fill underneath. */
[data-theme="classic"] .progress-bar {
    background-image:
        linear-gradient(
            45deg,
            color-mix(in srgb, var(--color-on-accent) 18%, transparent) 25%,
            transparent 25% 50%,
            color-mix(in srgb, var(--color-on-accent) 18%, transparent) 50% 75%,
            transparent 75%
        ),
        linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    background-size: 24px 24px, 100% 100%;
    animation: progress-stripes 1s linear infinite;
}

@keyframes progress-stripes {
    from { background-position: 24px 0, 0 0; }
    to { background-position: 0 0, 0 0; }
}

/* Search glyph inside the searchable-select filter box */
[data-theme="classic"] .searchable-select-search {
    padding-left: 32px;
    background-image: url("/static/themes/classic/icon-search.svg");
    background-position: 10px center;
    background-size: 14px;
    background-repeat: no-repeat;
}