:root {
    --status-chip-text: #fff;
    --status-chip-grey: #757575;
    --status-chip-red: #c62828;
    --status-chip-orange: #f57c00;
    --status-chip-green: #2e7d32;
    --status-chip-blue: #1976d2;
    --status-category-plate: #1565c0;
    --status-category-car: #4527a0;
    --status-category-parts: #ef6c00;
    --status-listing-sell: #1565c0;
    --status-listing-buy: #ef6c00;
}

@layer components {
    .status-chip {
        display: inline-block;
        padding: 2px 10px;
        border-radius: 9999px;
        font-size: 12px;
        font-weight: 600;
        line-height: 18px;
        color: var(--status-chip-text);
        white-space: nowrap;
        text-transform: none;
    }

    .status-chip--grey {
        background: var(--status-chip-grey);
    }

    .status-chip--red {
        background: var(--status-chip-red);
    }

    .status-chip--orange {
        background: var(--status-chip-orange);
    }

    .status-chip--green {
        background: var(--status-chip-green);
    }

    .status-chip--blue {
        background: var(--status-chip-blue);
    }

    .text-status-chip-red {
        color: var(--status-chip-red);
    }

    .text-status-chip-green {
        color: var(--status-chip-green);
    }

    .bg-status-chip-red {
        background-color: var(--status-chip-red);
    }

    .bg-status-chip-green {
        background-color: var(--status-chip-green);
    }

    .bg-status-chip-orange {
        background-color: var(--status-chip-orange);
    }
}