@charset "UTF-8";
@import 'libs/_lib';

.comments-wrapper {
    background-color: #161616;
    flex: 1 0 100%;

}

.comment-box {
    padding: 10px;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    #new-comment &,
    &:nth-child(2n) {
        background-color: #242424;
    }
    @media(min-width: 480px) {
        padding: 20px;

    }

}

.comments-note {
    padding: 10px;
    display: block;
    @media(min-width: 480px) {
        padding: 20px;

    }

}

.comment-avatar {
    flex: 0 0 55px;
    margin-right: 15px;
    background-color: #000000;
    position: relative;
    overflow: hidden;
    height: 55px;
    @media(min-width: 480px) {
        margin-right: 25px;

    }
    img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        max-width: none;
        width: auto;
        height: 100%;

    }

}

.comment-info {
    display: flex;
    flex-flow: row nowrap;
    margin-bottom: 10px;
    a {
        color: $theme-color-1;
        &:hover {
            color: darken($theme-color-1, 20%);

        }

    }

}

.comment-submitter,
.comment-date {
    padding-right: 20px;

}

.comment-text {
    color: #8c8c8c;

}

.comment-alert {
    padding: 0 10px;
    @media(min-width: 480px) {
        padding: 0 20px;

    }
    .notification {
        margin-bottom: 0;
        margin-top: 10px;
        @media(min-width: 480px) {
            margin-top: 20px;

        }

    }

}

.more-comments {
    display: none;

}

.add-comment {
    padding: 10px 10px 15px;
    @media(min-width: 480px) {
        padding: 20px 20px 25px;

    }
    input[type="text"],
    textarea {
        background-color: #000000;

    }
    .form-item {
        &.-actions {
            text-align: center;
            max-width: 100%;
            margin-bottom: 15px;
            @media(min-width: 480px) {
                max-width: 50%;
                text-align: right;

            }

        }
        &.-captcha {
            max-width: 100%;
            flex-basis: 100%;
            text-align: center;
            @media(min-width: 480px) {
                flex-basis: 50%;
                max-width: 50%;
                text-align: left;

            }
            @media(max-width: 479px) {
                padding-left: 0;
                padding-right: 0;

            }

        }
        .g-recaptcha {
            display: inline-block;

        }

    }
    .btn.btn-default {
        text-transform: uppercase;
        .svg-inline--fa {
            margin-right: 5px;
            font-size: 11px;

        }

    }

}

.expand-trigger {
    text-align: center;
    margin-top: 10px;
    @media(min-width: 480px) {
        margin-top: 20px;
        
    }
    .btn {
        .-off {
            display: inline-block;

        }
        .-on {
            display: none;

        }
        &.active {
            .-off {
                display: none;

            }
            .-on {
                display: inline-block;

            }

        }

    }


}