div.color
{
    cursor:pointer;

    display:flex;

    margin:0.5rem 0.25rem;
    align-items:center;

    overflow:hidden;

    height:24px;
    box-sizing:border-box;

    border-radius:24px;
    
    text-decoration:underline;

    transition: background-color text-decoration-color;
    transition-duration:250ms;

    background-color:var(--c_25);
    text-decoration-color: transparent;
}

div.color:active
{
    filter: brightness(20)
}

div.color:hover
{
    background-color:var(--c_50);
    text-decoration-color: white;
}

div.color > div.border-insert
{
    margin:0px 0.5rem;
}
div.color > div.circle
{
    height:24px;
    width:24px;
    margin-right:0.25rem;

    flex-shrink:0;

    box-sizing:border-box;

    border-radius:24px;
    border-style:dotted;
    border-width:2px;
    border-color:var(--c_100);
}
div.color > p
{
    font-size:1rem;
    margin:0px;
    flex-shrink:0;
}