// Generic "TailwindUI" style badges.
// see: https://tailwindui.com/components/badges
.wpr-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;

    &--gray {
        background-color: #f9fafb;
        color: #4b5563;
        box-shadow: inset 0 0 0 1px rgba(75, 85, 99, 0.1);
    }

    &--red {
        background-color: #fef2f2;
        color: #b91c1c;
        box-shadow: inset 0 0 0 1px rgba(185, 28, 28, 0.1);
    }

    &--yellow {
        background-color: #fefce8;
        color: #854d0e;
        box-shadow: inset 0 0 0 1px rgba(133, 77, 14, 0.2);
    }

    &--green {
        background-color: #f0fdf4;
        color: #15803d;
        box-shadow: inset 0 0 0 1px rgba(21, 128, 61, 0.2);
    }

    &--blue {
        background-color: #eff6ff;
        color: #1d4ed8;
        box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.1);
    }

    &--indigo {
        background-color: #eef2ff;
        color: #4338ca;
        box-shadow: inset 0 0 0 1px rgba(67, 56, 202, 0.1);
    }

    &--purple {
        background-color: #faf5ff;
        color: #7e22ce;
        box-shadow: inset 0 0 0 1px rgba(126, 34, 206, 0.1);
    }

    &--pink {
        background-color: #fdf2f8;
        color: #be185d;
        box-shadow: inset 0 0 0 1px rgba(190, 24, 93, 0.1);
    }
}

// Version Badge.
.wpr-version-badge {
    color: var(--wpr-gray-900);
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: center;
    padding: 3px 8px;
}

// Activity Badge.
.wpr-activity-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    padding: 5px 8px 5px 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;

    &__icon {
        margin-right: 0.25rem;
    }

    &--gray {
        background-color: #f9fafb;
        color: var(--wpr-gray-900);
        box-shadow: inset 0 0 0 1px rgba(75, 85, 99, 0.1);
    }
}
