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


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

@comment-avatar-margin-right:                   @global-margin;

@comment-title-font-size:                       round((@global-font-size * 1.14));
@comment-title-line-height:                     round((@comment-title-font-size * 1.37));

@comment-meta-color:                            @global-color;
@comment-meta-font-size:                        @global-font-size - 2;
@comment-meta-line-height:                      26px;

@comment-list-margin-top:                       @global-margin + 10px;

@comment-header-margin-bottom:                  @global-margin;
@comment-header-padding:                        20px;
@comment-header-border:                         @global-primary-light-background;
@comment-header-background:                     @global-primary-light-background;

@comment-primary-header-border:                 fade(@global-success-background, 15%);
@comment-primary-header-background:             fade(@global-success-background, 15%);


// Component
// ==========================================================================

.hook-comment() {}


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

.hook-comment-header() {
    padding: @comment-header-padding;
    border: 1px solid @comment-header-border;
    box-shadow: 0 1px 0 darken(@comment-header-background, 5%);
    background-color: @comment-header-background;
    border-radius: @global-border-radius;
    overflow: hidden;
}


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

.hook-comment-avatar() {
    box-shadow: 10px 0 30px 0 fade(@global-primary-background, 30%);
}


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

.hook-comment-title() {
    font-size: 20px;
    line-height: 26px;
    margin: 5px 0 10px;

    a {
        color: @global-heading-color;
        transition: @global-transition-color;

        &:hover {
            color: @global-link-color;
        }
    }
}


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

.hook-comment-meta() {
    font-family: @global-italic-font-family;
    font-weight: @global-italic-font-weight;

    a {
        text-decoration: none;
    }
}


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

.hook-comment-primary() {

    .uk-comment-header {
        border-color: @comment-primary-header-border;
        box-shadow: 0 1px 0 darken(@comment-primary-header-background, 3%);
    
        &:before {
            color: darken(@comment-primary-header-background, 2%);
        }
    }
}

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

.hook-comment-body() {}


// Miscellaneous
// ========================================================================

.hook-comment-misc() {

    // uk-comment-bodh
    .uk-comment-body {
        padding-right: @comment-header-padding;
        padding-left: @comment-header-padding;
    }

    // comment header
    .uk-comment-header:before {
        content: "\f11d";
        float: right;
        font-family: @global-utouch-icon;
        font-size: 150px;
        color: darken(@comment-header-background, 3%);
        margin: -15px -35px;
    }
}