#container {

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

    gap: 0 8px;

    transition: all ease-in-out 200ms;

    height: inherit;

    text-align: center;

    font-weight: 600;

    border: 1px solid var(--white-100);

}

@media(min-width: 1200px) {

    #container {
        gap: 0 16px;
    }

}

#container svg {

    transition: all ease-in-out 200ms;

    transform: scale(1.3);

}

#container[data-has-value=true] {

    background-color: var(--white-100) !important;

}

#container[data-has-value=true] svg {

    fill: var(--brand-color) !important;

}

#container[disabled] {

    background-color: var(--white-100);

}

#container[data-active=true] svg {

    transform: rotate(225deg) scale(1.3);

}

#user_media_status_list {

    z-index: 1;

    position: absolute;
    top: 62px;
    right: 0;

    min-width: 300px;

    background-color: var(--background);
    border-radius: 8px;

    padding: 16px;

    box-shadow: 0px 0px 4px 2px var(--white-25);

}

#user_media_status_list ul {

    display: flex;
    flex-direction: column;
    gap: 4px 0;

}

#user_media_status_list ul li {

    border-bottom: 1px solid var(--white-50);
    padding-bottom: 4px;

}

#user_media_status_list ul li:last-child {

    border-bottom: 0;

}

#user_media_status_list[data-is-loading=true] ul li button {

    filter: brightness(50%);

}

#user_media_status_list ul li button {

    transition: all ease-in-out 100ms;

    padding: 8px;

    width: 100%;
    height: 100%;

    border: 0;
    border-radius: 4px;
    background-color: transparent;

    font-size: var(--font-size--small-1);
    color: var(--white-100);

}

#user_media_status_list ul li button[data-active=true] {

    background-color: var(--white-100);

    transform: scale(1.05);
    color: var(--brand-color);

}

#user_media_status_list ul li button:hover {

    color: var(--brand-color);

}