@use 'sass:math';

blockquote {
    $rte-blockquote-icon-color: #fff;

    background: {
        image: inline-svg('<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 180 180"><path stroke="#{$rte-blockquote-icon-color}" stroke-miterlimit="10" stroke-width="5.06" d="M89.993 177.16c48.14 0 87.166-39.026 87.166-87.166 0-48.14-39.026-87.165-87.166-87.165-48.14 0-87.165 39.025-87.165 87.165 0 48.14 39.025 87.166 87.165 87.166Z"/><path stroke="#{$rte-blockquote-icon-color}" stroke-width="4" d="M61.052 53H74.9L62.558 87.355l-.961 2.676h16.622V128H42V92.195L61.052 53Zm58.781 0h13.848L121.34 87.355l-.962 2.676H137V128h-36.219V92.195L119.833 53Z"/></svg>');
        repeat: no-repeat;
        position: center top 30px;
        size: 100px;
    }

    color: var(--rocket-color-white-base);
    display: block;
    font-family: var(--rocket-font-primary);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 122%;
    margin: 0;
    padding: 150px 0 70px;
    position: relative;
    text-align: center;

    @include breakpoint(md) {
        background-position: right 0 top 65px;
        background-size: 140px;
        padding: 65px 180px 100px 0;
        text-align: left;
    }

    @include breakpoint(lg) {
        background-position: right 25px top 120px;
        background-size: 180px;
        font-size: 2.8125rem;
        padding: 120px 260px 160px 80px;
    }

    @include breakpoint(xl) {
        background-position: right 240px top 155px;
        padding: 120px 490px 160px 80px;
    }

    &::before {
        @include absolute(0, null, null, 50%);
        @include size(100vw, 100%);

        background-color: var(--rocket-color-green-200);
        content: '';
        transform: translateX(-50%);
        z-index: -1;
    }

    @include layout-stack;

    > * {
        position: relative;
        z-index: 1;
    }

    p {
        color: inherit;
        font-family: var(--rocket-font-primary);
        font-size: 1.875rem;
        font-weight: 700;
        line-height: 122%;
        margin: 0 0 40px;

        @include breakpoint(lg) {
            font-size: 2.8125rem;
        }
    }

    > cite {
        color: inherit;
        display: block;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 700;
        line-height: 122%;

        @include breakpoint(lg) {
            font-size: 1.875rem;
        }
    }
}