@import '../../style/front-end/variables.scss';

.storytelling-content-block {
    border-radius: 4px;
    padding-top: 0 !important;


    .storytelling-qa-block__qa {
        margin-bottom: 2rem;

        p {
            font-family: $united-sans-condensed;
            font-weight: 500;
            font-size: 3rem;
            text-transform: uppercase;
            margin-bottom: 1rem;
            color: #000000;
            background-color: $boiler-gold;
            display: inline-flex;
            padding: 1rem;
            line-height: 1;
        }
    }

    p.qa-question {
        font-family: $united-sans;
        font-weight: 700;
        font-size: 1.25rem;
        line-height: 1.25;
        text-transform: uppercase;
        margin-bottom: 0.25rem;
        color: $boiler-gold;
    }

    &.has-background-black {
        .storytelling-qa-block__qa {
            p {
                color: #000;
            }
        }
        p.qa-answer {
            color: #ffffff;
        }

    }

    &.has-background-grey-lighter {

        .storytelling-qa-block__qa {
            p {
                color: $boiler-gold;
                background-color: #000000;
            }
        }

        p.qa-question {
            color: #000000;
        }
    }

    &.has-background-grey-lighter-alt {
        background-color: #ededed;

        .storytelling-qa-block__qa {
            p {
                color: #ffffff;
                background-color: #000000;
            }
        }

        p.qa-question {
            color: $aged-gold;
        }
    }

    &.has-background-rush-gold {
        background-color: $rush-gold;

        .storytelling-qa-block__qa {
            p {
                color: #ffffff;
                background-color: $steel-gray;
            }
        }

        p.qa-question {
            color: #000000
        }
    }

    &.has-background-dark-gray {
        background-color: $steel-gray;

        .storytelling-qa-block__qa {
            p {
                color: #000;
                background-color: #fff;
            }
        }

        p.qa-question,
        p {
            color: #ffffff;
        }

    }

    &.has-background-gold {
        background-color: $boiler-gold;

        .storytelling-qa-block__qa {
            p {
                color: $aged-gold;
                background-color: #ededed;
            }
        }

        p.qa-question {
            color: #000000;
        }
    }

}

.storytelling-content-block::before {
    pointer-events: none;
}