.pill-row
    margin: 0
    padding: 0

    width: 100%
    height: auto

    display: flex
    justify-content: center
    align-items: center
    gap: 0.5rem

    > div
        margin: 0
        padding: 0

        display: flex

        background-color: RGB($bg-200)
        border-radius: $rad
        // box-shadow: 0 1px 0 RGB($bg-100), 0 -1px 0 RGB($bg-300)

.pill-text
    margin: 0
    padding: 0.5rem 1rem

    width: auto
    height: 2.5rem

    display: flex
    justify-content: center
    align-items: center

    position: relative

    text-align: center
    font-size: 1rem
    font-weight: 400

    background-color: RGB($bg-200)
    color: RGB($fg-white)
    border-radius: $rad

.pill-item
    margin: 0
    padding: 0.5rem

    width: 2.5rem
    height: 2.5rem

    display: flex
    justify-content: center
    align-items: center

    position: relative

    text-decoration: none

    border: none
    background-color: transparent
    color: RGB($fg-white)

    i
        font-size: 1.25rem

    &:hover
        cursor: pointer

        color: RGB($primary)

    &.disabled, &:disabled
        color: RGB($fg-dim)
        cursor: unset

.pill__critical
    color: RGB($critical)

    span
        background: RGB($critical)
        color: RGB($fg-white)

        i
            color: RGB($critical)

    &:hover
        color: RGB($fg-white)

.pill__info
    color: RGB($info)

    span
        color: RGB($info)

    &:hover
        color: RGB($fg-white)

@media (max-width: $breakpoint)
    .tool-tip
        display: none