.card {
    &.highlighted {
        background-color: rgb(var(--yellow-chip) / 0.15);
    }
    &.highlighted.outlined {
        background-color: rgb(var(--yellow-chip) / 0.15);
        border: 1px solid rgb(var(--yellow-chip) / 0.5);
    }
    &.helping {
        background-color: rgb(var(--blue-chip) / 0.15);
    }
    &.helping.outlined {
        background-color: rgb(var(--blue-chip) / 0.15);
        border: 1px solid rgb(var(--blue-chip) / 0.5);
    }
    &.speaking {
        background-color: rgb(var(--green-chip) / 0.15);
    }
    &.speaking.outlined {
        background-color: rgb(var(--green-chip) / 0.15);
        border: 1px solid rgb(var(--green-chip) / 0.5);
    }
    &.raised {
        background-color: var(--layer-surface);
        box-shadow: var(--elevation-1);
    }
    &.filled {
        background-color: var(--layer-surface-container);
    }
    &.primary-container {
        background-color: var(--primary-container);
    }
    &.small {
        --card-min-height: 3em;
    }
    &.red {
        background-color: rgb(var(--red-chip) / 0.25);
        color: var(--on-red);
        border: none;
    }
    &.green {
        background-color: rgb(var(--green-chip) / 0.25);
        color: var(--on-green);
        border: none;
    }
    &.yellow {
        background-color: rgb(var(--yellow-chip) / 0.25);
        color: var(--on-yellow);
        border: none;
    }

    &.amber {
        background-color: rgb(var(--amber-chip) / 0.25);
        color: var(--on-amber);
        border: none;
    }
    &.gray {
        background-color: rgb(var(--gray-chip) / 0.01);
        color: var(--primary);
        border: 1px solid var(--primary);
    }
    &:hover {
        box-shadow: var(--elevation-2);
    }

    &:active {
        box-shadow: var(--elevation-1);
    }
}