.slot .pill-homework {
    border-color: color-mix(in srgb, var(--type-homework-ink) var(--type-edge),
        var(--type-homework-ground));
    background-color: var(--type-homework-ground);
    color: var(--type-homework-ink);
}

.slot .pill-mastery {
    border-color: color-mix(in srgb, var(--type-mastery-ink) var(--type-edge),
        var(--type-mastery-ground));
    background-color: var(--type-mastery-ground);
    color: var(--type-mastery-ink);
}

.slot .pill-extension {
    border-color: color-mix(in srgb, var(--type-extension-ink) var(--type-edge),
        var(--type-extension-ground));
    background-color: var(--type-extension-ground);
    color: var(--type-extension-ink);
}

.slot-body { position: relative; }

.slot-body::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--bar-accent);
    transition: opacity var(--t-fast) var(--e-standard);
}

.slot-body:has(.pill-homework)::before { background-color: var(--type-homework-ink); }
.slot-body:has(.pill-mastery)::before { background-color: var(--type-mastery-ink); }
.slot-body:has(.pill-extension)::before { background-color: var(--type-extension-ink); }

.slot:disabled .pill {
    border-color: var(--border-subtle);
    background-color: transparent;
    color: var(--text-muted);
}

.slot[data-scarce] .slot-body::before,
.slot[data-held] .slot-body::before,
.slot:disabled .slot-body::before { opacity: var(--dim-disabled); }

.slot[data-held]:not(:disabled) .slot-body::before {
    inset-block-start: var(--bar-accent);
}