@use 'sass:math';
@use '../function' as *;
@use '../mixin';

@mixin roolith-comment() {
    .comment-group {
        border-top: rem(1) solid var(--r-comment-border);

        .comment {
            border-bottom: rem(1) solid var(--r-comment-border);
        }
    }

    .comment {
        padding: rem(20) rem(20) 0 rem(20);
    }

    .comment-body {
        font-size: rem(14);
        line-height: rem(22);
        padding: rem(15) 0;

        .comment-small & {
            font-size: rem(12);
            line-height: rem(18);
            padding: rem(10) 0;
        }
    }

    .comment-info {
        @extend .small, .dimmed;
        padding-bottom: rem(20);
    }

    .comment-action {
        @include mixin.clearfix();
        padding-bottom: rem(20);
    }

    .comment-action-item {
        float: left;
        padding: 0 rem(15) 0 0;
        font-size: rem(14);
        color: var(--r-color-dark-lighten-30);

        span {
            margin: 0 rem(5) 0 0;
        }
    }

    .comment-action-item-link {
        display: inline-flex;
        align-items: center;
        gap: rem(5);
        font-size: rem(14);
        line-height: 1.5;
        @include mixin.transition('color');
    }

    .comment-blurred {
        filter: blur(rem(2));
        opacity: 0.4;
    }

    .comment-highlight {
        background: var(--r-comment-highlight-color);
    }

    @for $i from 1 through 10 {
        .comment-indent-#{$i} {
            margin-left: math.percentage(math.div($i, 20));
        }
    }
}