$variant-colors: (
    error: --error,
    warning: --warning,
    success: --success,
    revision: --revision,
    crystal: --crystal,
);

.SuiteBadge.Pill {
    padding: 6px 12px;
    height: 32px;

    &.variant-crystal {
        background-color: var(--crystal-100);
    }

    &.small {
        height: 24px;
    }

    &.active {
        border-radius: var(--radius-extra-large);
    }

    &.disabled {
        background-color: var(--gray-100);
    }

    &:hover:not(.disabled) {
        cursor: pointer;
        background-color: var(--pills-tags-hover);

        @each $type, $variant-value in $variant-colors {
            &.variant-#{$type} {
                background-color: var(#{$variant-value}-150);
            }
        }
    }
}

.Popover[aria-describedby] {
    .SuiteBadge.Pill {
        background-color: var(--pills-tags-focused);

        @each $type, $variant-value in $variant-colors {
            &.variant-#{$type} {
                background-color: var(#{$variant-value}-200);
            }
        }
    }
}

.PopoverContent.PillPopoverContent {
    background-color: var(--white);
    padding: 20px;
}