.tasks-table {
    .task-status-selector {
        --pico-form-element-spacing-vertical: 0.25em;
        --pico-form-element-spacing-horizontal: 0.5em;
    }
}

.task-status {
    --color: #424751; /* Pico zinc 700 */
    --background-color: #E0E3E7; /* Pico zinc 100 */

    &.badge {
        border: 2px solid var(--border-color, currentColor);
        color: var(--color, currentColor);
        background-color: var(--background-color);
    }

    &.blue {
        --color: #1D59D0; /* Pico blue 600 */
        --background-color: #E0E1FA/* Pico blue 100 */
    }

    &.yellow {
        --background-color: #FDDEA6; /* Pico amber 100 */
        --border-color: #A77C00; /* Pico amber 450 */
    }

    &.green {
        --color: var(--success-color);
        --background-color: var(--success-bg);
    }

    &.purple {
        --color: #9236A4; /* Pico purple 600 */
        --background-color: #F2DCF4; /* Pico purple 100 */
    }

    &.pink {
        --color: #B21E4F; /* Pico pink 600 */
        --background-color: #F9DBDF; /* Pico pink 100 */
    }
}

.task-show-info {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.5em;

    > * {
        margin: 0;
    }
}