/*---------------------
   Lista de comentarios
   ----------------------- */

.comments-info-title {
    margin-top: 1rem;
    margin-left: 1rem;
}

.comments-container {
    > ul {
        list-style: none;
        > li > ul {
            list-style: none;
        }
    }
    margin: 0px 2rem 15px;
    width: 100%;
}

.comments-list {
    margin-top: 30px;
    position: relative;
}

.comments-main {
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.comment-main-level {
    margin-left: -30px;
}

/**
 * Lineas / Detalles
   -----------------------*/

.comments-list {
    &:before {
        content: '';
        width: 2px;
        height: 100%;
        background: #c7cacb;
        position: absolute;
        /* left: 2%; /\* 100/2 centra la línea con la imagen avatar *\/ */
        left: 2px;
        top: 0;
    }
    &:after {
        content: '';
        width: 7px;
        height: 7px;
        border: 3px solid #dee1e3;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
}

.reply-list {
    margin-left: -15px;
    &:before, &:after {
        display: none;
    }
    li:before {
        content: '';
        width: 60px;
        height: 2px;
        background: #c7cacb;
        position: absolute;
        top: 25px;
        left: -55px;
    }
}

/* End Líneas
   ------------------------*/

.comments-list li {
    margin-bottom: 15px;
    position: relative;
    &:after {
        content: '';
        display: block;
        clear: both;
        height: 0px;
        width: 0px;
    }
}

.reply-list {
    padding-left: 88px;
    clear: both;
    margin-top: 15px;
}

/*---------------------
   Avatar
   ----------------------- */

.comments-list .comment-avatar {
    width: 65px;
    height: 65px;
    position: relative;
    z-index: 2;
    border: 3px solid #FFF;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    img {
        width: 100%;
        height: 100%;
    }
}

.reply-list .comment-avatar {
    width: 50px;
    height: 50px;
}

.comment-main-level:after {
    content: '';
    width: 0;
    height: 0;
    display: block;
    clear: both;
}

/**
 * Caja del Comentario
   ---------------------------*/

.comments-list .comment-box {
    width: 80%;
    position: relative;
    margin-left: 1rem;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
    &:before, &:after {
        content: '';
        height: 0;
        width: 0;
        position: absolute;
        display: block;
        border-width: 10px 12px 10px 0;
        border-style: solid;
        border-color: transparent #222;
        top: 8px;
        left: -11px;
    }
    &:before {
        border-width: 11px 13px 11px 0;
        border-color: transparent rgba(0, 0, 0, 0.05);
        left: -12px;
    }
}

.reply-list .comment-box {
    width: 75%;
}

.comment-box {
    .comment-head {
        background: #222;
        padding: 10px 12px;
        border-bottom: 1px solid #ccc;
        /* color de flecha */
        overflow: hidden;
        -webkit-border-radius: 4px 4px 0 0;
        -moz-border-radius: 4px 4px 0 0;
        border-radius: 4px 4px 0 0;
        i {
            float: right;
            margin-left: 14px;
            position: relative;
            color: #A6A6A6;
            cursor: pointer;
            -webkit-transition: color 0.3s ease;
            -o-transition: color 0.3s ease;
            transition: color 0.3s ease;
            &:hover {
                color: red;
            }
        }
    }
    .comment-name {
        color: #283035;
        font-size: 14px;
        font-weight: 700;
        float: left;
        margin-right: 10px;
        a {
            color: #007fdb;
        }
    }
    .comment-head span {
        float: left;
        color: #999;
        font-size: 13px;
        position: relative;
    }
    .comment-content {
        background: #333;
        padding: 12px;
        font-size: 15px;
        color: #fff;
        -webkit-border-radius: 0 0 4px 4px;
        -moz-border-radius: 0 0 4px 4px;
        border-radius: 0 0 4px 4px;
    }
    .comment-name.by-author {
        color: #00aee6;
        a {
            color: #00aee6;
        }
        &:after {
            content: 'autor';
            background: #03658c;
            color: #FFF;
            font-size: 12px;
            padding: 3px 5px;
            font-weight: 700;
            margin-left: 10px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }
    }
}

/** =====================
 * Responsive
   ========================*/
@media only screen and (max-width: 766px) {
    .comments-container {
        width: 480px;
    }
    .comments-list .comment-box {
        width: 390px;
    }
    .reply-list .comment-box {
        width: 320px;
    }
}

@media only screen and (max-width: 480px) {
    .comments-container {
        width: 480px;
    }
    /* Líneas */
    .comments-list {
        &:before {
            left: -13px;
        }
        &.reply-list {
            margin-left: -30px;
        }
        &:after {
            left: -15px;
            position: relative;
        }
    }
    /* End lineas */
    .comment-box {
        .comment-head, .comment-content {
            font-size: 12px;
        }
    }
    .comments-list {
        .comment-avatar {
            width: 35px;
            height: 35px;
        }
        .comment-box {
            max-width: 250px;
        }
    }
    .reply-list .comment-box {
        max-width: 170px;
    }
}

@media only screen and (max-width: 360px) {
    .comments-list {
        .comment-avatar {
            width: 35px;
            height: 35px;
        }
        .comment-box {
            max-width: 200px;
        }
    }
    .reply-list .comment-box {
        max-width: 120px;
    }
}