/* Multiple pills container */
.ui-pills-container {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space);
}

.ui-pill {
    --ui-pill-height: var(--space-x3);
    --ui-pill-height-small: var(--space-x2);

    display: inline-flex;
    align-items: center;
    height: min-content;
    min-height: var(--ui-pill-height);
    padding: calc(var(--space-half) / 2) var(--space-x1_5);
    font: var(--theme-paragraph-10-semibold);
    text-wrap: nowrap;
    letter-spacing: var(--theme-paragraph-10-letter-spacing);
    border-radius: var(--theme-border-radius-badge-pill);
}

.ui-pill__icon {
    margin-right: var(--space-half);
}

.ui-pill[uppercase] {
    text-transform: uppercase;
}

.ui-pill[interactive] {
    cursor: pointer;
}

/* Size */
.ui-pill[t-size="small"] {
    min-height: var(--ui-pill-height-small);
}

/* Shape */
.ui-pill[t-shape="squared"] {
    border-radius: 0;
}

.ui-pill[t-shape="rounded"] {
    border-radius: var(--theme-border-radius-badge-rounded);
}

.ui-pill[t-shape="rounded"][t-size] {
    border-radius: calc(var(--theme-border-radius-badge-rounded) / 2);
}

/* Fill */
.ui-pill[t-variant="fill"][t-type="info"] {
    color: var(--theme-pill-normal-text);
    background-color: var(--theme-pill-normal-fill);
}

.ui-pill[t-variant="fill"][t-type="info"][interactive]:hover {
    background-color: var(--theme-pill-normal-fill-hover);
}

.ui-pill[t-variant="fill"][t-type="success"] {
    color: var(--theme-pill-success-text);
    background-color: var(--theme-pill-success-fill);
}

.ui-pill[t-variant="fill"][t-type="success"][interactive]:hover {
    background-color: var(--theme-pill-success-fill-hover);
}

.ui-pill[t-variant="fill"][t-type="warning"] {
    color: var(--theme-pill-warning-text);
    background-color: var(--theme-pill-warning-fill);
}

.ui-pill[t-variant="fill"][t-type="warning"][interactive]:hover {
    background-color: var(--theme-pill-warning-fill-hover);
}

.ui-pill[t-variant="fill"][t-type="critical"] {
    color: var(--theme-pill-critical-text);
    background-color: var(--theme-pill-critical-fill);
}

.ui-pill[t-variant="fill"][t-type="critical"][interactive]:hover {
    background-color: var(--theme-pill-critical-fill-hover);
}

.ui-pill[t-variant="fill"][t-type="emphasis"] {
    color: var(--theme-pill-emphasis-text);
    background-color: var(--theme-pill-emphasis-fill);
}

.ui-pill[t-variant="fill"][t-type="emphasis"][interactive]:hover {
    background-color: var(--theme-pill-emphasis-fill-hover);
}

/* Outline */
.ui-pill[t-variant="outline"][t-type="info"] {
    color: var(--theme-pill-normal-text);
    border: 1px solid var(--theme-pill-normal-text);
}

.ui-pill[t-variant="outline"][t-type="info"][interactive]:hover {
    border-color: var(--theme-pill-normal-fill-hover);
}

.ui-pill[t-variant="outline"][t-type="success"] {
    color: var(--theme-pill-success-text);
    border: 1px solid var(--theme-pill-success-text);
}

.ui-pill[t-variant="outline"][t-type="success"][interactive]:hover {
    border-color: var(--theme-pill-success-fill-hover);
}

.ui-pill[t-variant="outline"][t-type="warning"] {
    color: var(--theme-pill-warning-text);
    border: 1px solid var(--theme-pill-warning-text);
}

.ui-pill[t-variant="outline"][t-type="warning"][interactive]:hover {
    border-color: var(--theme-pill-warning-fill-hover);
}

.ui-pill[t-variant="outline"][t-type="critical"] {
    color: var(--theme-pill-critical-text);
    border: 1px solid var(--theme-pill-critical-text);
}

.ui-pill[t-variant="outline"][t-type="critical"][interactive]:hover {
    border-color: var(--theme-pill-critical-fill-hover);
}

.ui-pill[t-variant="outline"][t-type="emphasis"] {
    color: var(--theme-pill-emphasis-text);
    border: 1px solid var(--theme-pill-emphasis-text);
}

.ui-pill[t-variant="outline"][t-type="emphasis"][interactive]:hover {
    border-color: var(--theme-pill-emphasis-fill-hover);
}

/* Text */
.ui-pill[t-variant="text"] {
    height: auto !important;
    padding: 0;
}

.ui-pill[t-variant="text"][t-type="info"] {
    color: var(--theme-pill-normal-text);
}

.ui-pill[t-variant="text"][t-type="success"] {
    color: var(--theme-pill-success-text);
}

.ui-pill[t-variant="text"][t-type="warning"] {
    color: var(--theme-pill-warning-text);
}

.ui-pill[t-variant="text"][t-type="critical"] {
    color: var(--theme-pill-critical-text);
}

.ui-pill[t-variant="text"][t-type="emphasis"] {
    color: var(--theme-pill-emphasis-text);
}

.ui-pill__text {
    overflow: hidden;
    white-space: nowrap;
}