/* -------------------------------------------
    Testimonial
---------------------------------------------- */

@if use_component(testimonial) {
    .testimonial-group .testimonial {
        margin-bottom: 2rem;
    }
    .testimonial {
        margin-bottom: 0;
        padding: 0;
        border: none;
        background: transparent;
        width: 100%;
        color: #999;
		font-size: font-size( 1.6rem );
		
		&::before {
			display: none;
		}

        .icon::before {
            content: ',,';
            display: block;
            font-style: normal;
            font-weight: normal;
            font-size: font-size( 2.6rem );
            line-height: 1;
            color: var(--rio-primary-color, #26b);
        }

        img, 
        .owl-carousel & img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
        }

        cite {
            display: inline-block;
            font-style: normal;
                color: #333;
        }

        .avatar,
        cite,
        .comment {
            margin-bottom: 1.5rem;
        }

        .content {
            flex: 1;
        }

        .comment-title {
            margin-bottom: 2.6rem;
            font-size: font-size( 1.8rem );
            line-height: 1.2;
        }

        .comment {
            font-size: font-size( 1.4rem );
            line-height: 1.75;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        &.aside,
        &.aside_info .commenter,
        .avatar {
            display: inline-flex;
        }

        &.aside,
        &.aside_info {
            .avatar {
                margin-#{$right}: 1.5rem;
            }
        }

        cite span,
        &.top_info cite {
            display: block;
        }

        .name {
            font-size: font-size( 1.4rem );
            font-style: normal;
            line-height: 1;
        }

        .job {
            font-size: font-size( 1.2rem );
            text-transform: none;
            color: #999;
            line-height: 1;
        }

        .ratings-full {
            display: inline-block;
            position: relative;
            font-family: 'riode';
            letter-spacing: .2em;
            cursor: pointer;
        
            &::before {
                content: "\e955 " "\e955 " "\e955 " "\e955 " "\e955";
                color: rgba(0, 0, 0, 0.16);
            }
        
            span {
                position: absolute;
                top: 0;
                #{$left}: 0;
                height: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-align: $left;
                text-indent: -9999rem;
        
                &::after {
                    content: "\e955 " "\e955 " "\e955 " "\e955 " "\e955";
                    text-indent: 0;
                    position: absolute;
                    #{$left}: 0;
                    color: #222;
                }
            }
        }
    }

// Simple
    .testimonial-simple {
        .comment-title {
            margin-bottom: 0;
        }
        .content {
            position: relative;
            margin-bottom: 2rem;
            padding: 1.5rem 2rem;
            color: #666;
            background-color: #f6f7f9;
            overflow: visible;
            &::after {
                content: '';
                position: absolute;  
                bottom: 0;
                #{$left}: 30px;
                display: block;
                width: 12px;
                height: 12px;
                background-color: #f6f7f9;
                transform: rotate(-45deg) translateY(60%);
            }
        }
        .name { margin-bottom: .7rem; }
        cite, .avatar, .comment { margin-bottom: 0; }
        .commenter {
            display: flex;
            align-items: center;
            padding: 0 2rem;
            .avatar { margin-#{$right}: 1.5rem; }
        }
        &.inversed {
            .content::after {
                #{$right}: 45px;
                #{$left}: auto;
            }
            .avatar {
                order: 2;
                margin-#{$left}: 1.5rem;
                margin-#{$right}: 0;
            }
            .commenter { justify-content: if-ltr(flex-end, flex-start); }
            cite { text-align: #{$right}; }
        }
    }
// Boxed
    .testimonial-boxed {
        text-align: center;
                .avatar,
        .comment {
            margin: 0 auto 2rem auto;
        }
        .name { margin-bottom: .8rem; }
    }
}