.pill-container {
    margin: 0.5rem;
    padding-right: 1rem;
    padding-left: 1rem;
    border-radius: 3rem;
    background-color: #000000;
    display: flex;
    flex-direction: row;
    width: fit-content;
    justify-content: center;
    align-items: center;
    font-family: 'Urbanist', sans-serif;
    font-weight: 700;
    cursor: default;
}

.pill-white {
    color: var(--color-background);
}

.pill-black {
    color: var(--color-text);
}

.pill-white img {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(19deg) brightness(116%) contrast(113%);
}

.pill-black img {
    filter: invert(8%) sepia(21%) saturate(1187%) hue-rotate(234deg) brightness(101%) contrast(91%);
}

.pill-container img {
    margin-right: 0.5rem;
}

.pill-container svg {
    margin-right: 0.5rem;
}

.pill-container p {
    margin-right: 0.5rem;
}

.pill-tooltip {
    position: absolute;
    z-index: 1;
    background-color: var(--color-background);
    color: var(--color-text);
    min-width: 5rem;
    border-radius: 0.4rem;
    display: flex;
    justify-content: center;
    visibility: hidden;
    transition: all .3s ease 0s;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
    padding-right: 1rem;
}

.pill-tooltip>div {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.pill-tooltip svg {
    margin: 0 !important;
    padding: 0 !important;
}

.pill-last {
    margin-left: auto;
}

.pill-view {
    width: 2.2rem;
    height: 2.2rem;
    background-color: var(--color-special);
    box-shadow: 0px 8px 18px -1px #0174BE50;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-background);
    border: 0;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
    transition: none;
}

.pill-view:hover {
    transition: all .3s ease 0s;
    color: var(--color-special);
    background-color: var(--color-background);
}

.pill-view:active {
    transform: translateY(3px);
    box-shadow: 0px 4px 12px -1px #0174BE70;
}

.pill-arrow {
    position: absolute;
    z-index: 2;
    transform: translateY(-2.2rem);
    width: 0px;
    height: 0px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid var(--color-background);
    visibility: hidden;
    transition: all .3s ease 0s;
    filter: none;
}