.pillbar.content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    z-index: 999;
}

.pillbar.content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto;

    width: 100%;
    gap: 6px;


    padding: 12px 12px 12px 12px;

    background-color: transparent;

    scrollbar-width: thin;
    scrollbar-color: var(--primaryAccent) var(--bodyBackground);

    transition: var(--primaryInteraction);
}

@media screen and (min-width: 991px) {
    .pillbar.content {
        justify-content: center;
    }
}

.pillbar.action-wrapper {
    padding: 1px;
    border-radius: 999px;

    background: var(--toolbarBorder);
    flex: 0 0 auto;
    backdrop-filter: blur(6px) saturate(60%);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);

    transition: var(--primaryInteraction);
}

#pillbar.toolbar.button:hover {
    background-color: var(--primaryAccent);
    color: var(--tintAccent);
}