/* ==================================== */
/* RATING SYSTEM */
/* ==================================== */

.rating-container {
    display: flex;
    align-items: center;
    margin-right: 15px;
    /* MOBILE */
}

.rating-container .voters {
    display: block;
    font-size: 11px;
    /* MOBILE */
    text-transform: uppercase;
    margin: 0 0 3px;
}

.rating-container .rating {
    min-width: 80px;
    /* MOBILE */
    text-align: center;
}

/* Barra de likes/dislikes */
.like-dislike-bar {
    height: 3px;
    /* MOBILE */
    background-color: var(--color-dislike);
    /* APLICANDO VARIABLE (#FF3B30) */
    min-width: 80px;
    /* MOBILE */
    position: relative;
    border-radius: 2px;
}

.like-dislike-bar .like-dislike-bar-percent-control {
    height: 3px;
    /* MOBILE */
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: var(--color-like);
    /* APLICANDO VARIABLE (#007AFF) */
    border-radius: 2px;
}

.like-dislike-bar.is-no-votes {
    background-color: var(--color-bg-header);
    /* APLICANDO VARIABLE */
}

.like-dislike-bar.is-no-votes .like-dislike-bar-percent-control {
    display: none;
}

/* RESPONSIVE TABLET */
@media (min-width: 769px) {
    .rating-container {
        margin-right: 20px;
    }

    .rating-container .voters {
        font-size: 12px;
        margin: 0 0 5px;
    }

    .rating-container .rating {
        min-width: 100px;
    }

    .like-dislike-bar {
        height: 4px;
        min-width: 100px;
    }

    .like-dislike-bar .like-dislike-bar-percent-control {
        height: 4px;
    }
}