/*  EXAMPLE USAGE:
--------------------------------------------------------------------------------
    <div class="orb orb__m" style="background-image:url(artist.png)"></div>
------------------------------------------------------------------------------*/

.orb {
    display: block;
    width: 140px;
    height: 140px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 100%;
    border-style: solid;
    border-color: #24D8BF;
    flex-shrink: 0;
    position: relative;

    border-width: 3px;
}

/******************************************************************************\
    EMBELISHMENTS
\******************************************************************************/

.orb--play-button:before {
    position: absolute;
    content: '<img src="/images/icons/play>"';
    /* background-image: url(/images/play.png); */
    height: 40%;
    width: 40%;
    background-size: cover;
    bottom: 0;
    right: 0;
    border-radius: 999px;
}

.orb.orb--no-border {
    border: none;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
    margin: 5px;
}

.orb__play-button {
    position: absolute;
    content: '<img src="/images/icons/play>"';
    color: white;
    height: 40%;
    width: 40%;
    bottom: 0;
    right: 0;
    border-radius: 999px;
    display: flex;
    background-color: #7448FF;
    justify-content: center;
    align-items: center;

}

.orb__play-button img {
    height: 50%;
    width: 50%;
    position: relative;
    left: 6%;
}

/******************************************************************************\
    SIZES
\******************************************************************************/

.orb--xs {
    height: 30px;
    width: 30px;

    border-width: 1px;
}

.orb--s {
    height: 68px;
    width: 68px;

    border-width: 2px;
}

.orb--m {
    height: 92px;
    width: 92px;

    border-width: 2px;
}

.orb--l {
    height: 140px;
    width: 140px;

    border-width: 3px;
}

.orb--xl {
    height: 260px;
    width: 260px;

    border-width: 3px;
}