// Name:            Comment
// Description:     Defines styles for comment threads
//
// Component:       `uk-comment`
//
// Sub-objects:     `uk-comment-header`
//                  `uk-comment-avatar`
//                  `uk-comment-title`
//                  `uk-comment-meta`
//                  `uk-comment-body`
//                  `uk-comment-list`
//                  `uk-comment-primary`
//
// Markup:
//
// <!-- uk-comment -->
// <article class="uk-comment">
//     <header class="uk-comment-header">
//         <img class="uk-comment-avatar" src="avatar.svg" width="50" height="50" alt="">
//         <h4 class="uk-comment-title"></h4>
//         <div class="uk-comment-meta"></div>
//     </header>
//     <div class="uk-comment-body">
//         <p></p>
//     </div>
// </article>
//
// ========================================================================


// Variables
// ========================================================================

$comment-header-margin-bottom:                   15px !default;

$comment-avatar-margin-right:                    15px !default;

$comment-title-margin-top:                       5px !default;
$comment-title-font-size:                        16px !default;
$comment-title-line-height:                      22px !default;

$comment-meta-margin-top:                        2px !default;
$comment-meta-color:                             #999 !default;
$comment-meta-font-size:                         11px !default;
$comment-meta-line-height:                       16px !default;

$comment-list-margin-top:                        15px !default;
$comment-list-padding-left:                      100px !default;


/* ========================================================================
   Component: Comment
 ========================================================================== */

.uk-comment {
    @include hook-comment();
}


/* Sub-object `uk-comment-header`
 ========================================================================== */

.uk-comment-header {
    margin-bottom: $comment-header-margin-bottom;
    @include hook-comment-header();
}

/*
 * Micro clearfix
 */

.uk-comment-header:before,
.uk-comment-header:after {
    content: "";
    display: table;
}

.uk-comment-header:after { clear: both; }


/* Sub-object `uk-comment-avatar`
 ========================================================================== */

.uk-comment-avatar {
    margin-right: $comment-avatar-margin-right;
    float: left;
    @include hook-comment-avatar();
}


/* Sub-object `uk-comment-title`
 ========================================================================== */

.uk-comment-title {
    margin: $comment-title-margin-top 0 0 0;
    font-size: $comment-title-font-size;
    line-height: $comment-title-line-height;
    @include hook-comment-title();
}


/* Sub-object `uk-comment-meta`
 ========================================================================== */

.uk-comment-meta {
    margin: $comment-meta-margin-top 0 0 0;
    font-size: $comment-meta-font-size;
    line-height: $comment-meta-line-height;
    color: $comment-meta-color;
    @include hook-comment-meta();
}


/* Sub-object `uk-comment-body`
 ========================================================================== */

.uk-comment-body {
    @include hook-comment-body();
}

/*
 * Remove margin from the last-child
 */

 .uk-comment-body > :last-child { margin-bottom: 0; }


/* Sub-object `uk-comment-list`
 ========================================================================== */

.uk-comment-list {
    padding: 0;
    list-style: none;
}

.uk-comment-list .uk-comment + ul {
    margin: $comment-list-margin-top 0 0 0;
    list-style: none;
}

.uk-comment-list > li:nth-child(n+2),
.uk-comment-list .uk-comment + ul > li:nth-child(n+2) { margin-top: $comment-list-margin-top; }

/* Tablet and bigger */
@media (min-width: $breakpoint-medium) {

    .uk-comment-list .uk-comment + ul { padding-left: $comment-list-padding-left; }

}


/* Modifier `uk-comment-primary`
 ========================================================================== */

.uk-comment-primary {
    @include hook-comment-primary();
}


// Hooks
// ========================================================================

@include hook-comment-misc();

// @mixin hook-comment(){}
// @mixin hook-comment-header(){}
// @mixin hook-comment-avatar(){}
// @mixin hook-comment-title(){}
// @mixin hook-comment-meta(){}
// @mixin hook-comment-body(){}
// @mixin hook-comment-primary(){}
// @mixin hook-comment-misc(){}