@layer components {
    status-bar {
        display: block;
        height: 8px;
        background-color: var(--color-steel);

        &[status="new"] {
            background-color: color-mix(in srgb, var(--color-yellow) 50%, transparent);
        }

        &[status="processing"] {
            background-color: var(--color-blue);
        }

        &[status="open"] {
            background-color: color-mix(in srgb, var(--color-blue) 50%, transparent);
        }

        &[status="complete"] {
            background-color: var(--color-sage);
        }

        &[status="closed"] {
            background-color: color-mix(in srgb, var(--color-red) 50%, transparent);
        }

        &[status="canceled"] {
            background-color: color-mix(in srgb, var(--color-red) 50%, transparent);
        }

        &[active] {
            background: repeating-linear-gradient(135deg,
                        #63adf2,
                        #63adf2 5%,
                        #8fc5f8 5%,
                        #8fc5f8 10%);
                background-size: 100px 100px;
                animation: move-it 4s linear infinite;
        }
    }

    @keyframes move-it {
        0% {
            background-position: initial;
        }

        100% {
            background-position: 100px 0px;
        }
    }
}