/* -------------------------------------------
    Blockquote
     - General
     - Type 1
     - Type 2
     - Type 3
     - Type 4
     - Type 5
---------------------------------------------- */

// General
.blockquote-wrapper {
    font-size: 10px;
    blockquote {
        position: relative;
        margin-bottom: 0;
        padding-#{$left}: 35px;
        padding-#{$right}: 0;
        p {
            margin-bottom: 15px;
            font-size: 2em;
            font-weight: 600;
            line-height: 1.6;
            letter-spacing: -.025em;
            color: #222;
        }
        cite {
            font-size: 14px;
            font-style: normal;
            color: #999;
            letter-spacing: 0;
            line-height: 1.71;
            text-transform: uppercase;
        }
        &::before {
            width: 1px;
            top: -3px;
            bottom: -3px;
        }
    }
    @include mq(md, max) {
        font-size: 9px;
    }
    @include mq(sm, max) {
        font-size: 8px;
    }
    @include mq(xs, max) {
        font-size: 7px;
    }
}

.blockquote-icon {
    display: block;
    margin-bottom: 26px;
    font-size: 31px;
    color: var(--rio-primary-color, #27c);
}
.blockquote-media {
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

// Type 1
.blockquote-type1 {
    display: flex;
    align-items: center;
    .blockquote-icon {
        margin-#{$right}: 35px;
        margin-bottom: 0;
    }
}

// Type 2
.blockquote-type2 {
    blockquote {
        padding-#{$left}: 0;
        &::before { 
            content: none;
        }
        p {
            &::before {
                content: '‘‘';
            }
            &::after {
                content: '’’';
            }
        }
        cite {
            &::before {
                content: '- ';
            }
        }
    }
}

// Type 3
.blockquote-type3 {
    blockquote {
        &::before {
            background-color: var(--rio-primary-color);
        }
    }
}

// Type 4 or Type 5
.blockquote-type4,
.blockquote-type5 {
    blockquote {
        i, p, cite {
            position: relative;
        }
        &::before { 
            content: '\f10d';
            font-family: var(--fa-style-family-classic,"Font Awesome 6 Free");
            font-weight: 900;
            font-size: 135px;
            line-height: 0.9;
            width: auto;
            color: #f1f1f1;
            background: transparent;
        }
    }
}

// Type 4
.blockquote-type4 {
    display: flex;
    .blockquote-media {
        flex: 1;
        order: 1;
    }
    blockquote {
        display: flex;
        flex-direction: column;
        justify-content: center;
        max-width: 440px;
        flex: 1;
        padding: side-values( 30px 30px 30px 60px );
        background-color: #f8f8f8;
        overflow: hidden;
        &::before {
            bottom: -10px;
            right: 50px;
            top: auto;
            left: auto;
        }
        p {
            font-size: 22px;
            line-height: 1.45;
        }
    }

    @include mq(sm, max) {
        display: block;
        blockquote {
            max-width: 100%;
            padding: side-values( 30px 30px 30px 30px );
        }
    }
}

// Type 5
.blockquote-type5 {
    blockquote {
        margin: 0 auto;
        max-width: 80%;
        padding: 56px 50px 43px 50px;
        transform: translateY(-50%);
        background-color: #fff;
        box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
        p {
            margin-bottom: 20px;
        }
        &::before { 
            top: 30px;
            left: 30px;
        }
    }

    &.dark-skin {
        blockquote {
            background-color: #313438;
            &::before {
                opacity: .04;
            }
        }
        p {
            color: #fff;
        }
        cite {
            color: #e1e1e1;
        }
    }

    @include mq(sm, max) {
        blockquote {
            padding: 35px;
        }
    }
    @include mq(xs, max) {
        blockquote {
            padding: 25px;
        }
    }
}