@charset "utf-8;";

:root 
{
    --contributors-bg-color: rgb(255, 255, 255);
    --contributors-border-color: rgb(234, 234, 239);
}

:root.dark 
{
    --contributors-bg-color: rgb(9, 9, 10);
    --contributors-border-color: rgb(11, 11, 12);
}

ul.contributors 
{
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

ul.contributors > li
{
    background-color: var(--contributors-bg-color);
    border-color: var(--contributors-border-color);

    border-style: solid ;
    border-radius: 7px;
    border-width: 1px;

    display: flex;
    position: relative;
    margin: 1px;

    padding: 8px 3px;

    list-style: none;
    align-items: center;
}

ul.edit-people > li 
{
    padding-right: 30px;
}

ul.contributors > li > * 
{
    padding: 0px 5px;
}

ul.contributors > li > *:nth-child(2) 
{
    padding: 0px 15px;
    padding-bottom: 7px;
}

ul.contributors > li > div > p.remove 
{
    position: absolute;
    display: block;
    cursor: pointer;
    right: 5px;
    top: 4px;
    width: 18px;
    height: 18px;
    background-size: 18px;
    background-image: url(../icons/trash.svg);
    background-repeat: no-repeat;
    background-position: top;
}

ul.contributors > li > div > p.remove:hover 
{
    background-position: bottom;
}

html.dark ul.contributors > li > div > p.remove {
    filter: invert(100%);
}

ul.contributors > li > div.info > p.name 
{
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
    margin: 4px 0px;
}

ul.contributors > li > div.info > p.type 
{
    font-size: 15px;
    line-height: 15px;
}

ul.contributors > li > div.image 
{
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.contributors > li > div.image > img 
{
    border-radius: 100%;
    width: 50px;
    height: 50px;
}



div.social-media 
{
    margin: 0px;
    display: flex;
    list-style: none;
}

div.social-media > a 
{
    width: 22px;
    height: 22px;
    color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
}

div.social-media > a.twitter {
    background-size: 80%;
    background-image: url(../icons/sm-twitter.svg); 
}

div.social-media > a.link {
    background-size: 80%;
    background-image: url(../icons/link.svg);
}

div.social-media > a.facebook { background-image: url(../icons/sm-facebook.svg); }
div.social-media > a.linkedin { background-image: url(../icons/sm-linkedin.svg); }
div.social-media > a.investor { background-image: url(../icons/sm-investor.svg); }
div.social-media > a.wesbite { background-image: url(../icons/sm-website.svg); }

html.dark div.social-media > a.investor,
html.dark div.social-media > a.twitter,
html.dark div.social-media > a.link,
html.dark div.social-media > a.facebook,
html.dark div.social-media > a.linkedin,
html.dark div.social-media > a.wesbite { filter: invert(100%); }

div.social-media > a:hover { background-size: 90%; }


@media screen and (max-width: 500px) 
{
    ul.contributors > li 
    {
        width: calc(100% - 10px);
    }

    ul.contributors > li > div:nth-child(2) 
    {
        width: 100%;
    }

    ul.contributors > li > div:nth-child(3) 
    {
        margin-right: 10px;
    }
}