.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: $black
        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

    border: none
    background-color: transparent
    color: $white

    svg
        width: 1.25rem
        height: 1.25rem

    &:hover
        cursor: pointer

        color: $primary

        .tool-tip
            opacity: 1
            top: -2.5rem
            transform: translateX(calc(-50% + 1.25rem ))

.pill__critical
    color: $critical

    span
        color: $critical

    &:hover
        color: $white

.pill__info
    color: $info

    span
        color: $info

    &:hover
        color: $white

.tool-tip
    margin: 0
    padding: 0.5rem 0.75rem

    width: auto

    display: block

    position: absolute
    top: -1.7rem
    left: 0
    transform: translateX(calc(-50% + 1.25rem ))

    font-size: 1rem
    font-weight: 600

    background-color: $black2
    color: $white
    opacity: 0
    border-radius: $rad-inner

    transition: opacity 0.2s cubic-bezier(.76,0,.17,1), top 0.2s cubic-bezier(.76,0,.17,1)

    pointer-events: none