<div class="shell">
    <div class="example">
        <div class="example__heading">
            Site messaging (original example)
        </div>
        <div class="example__settings">
            <div class="example__settingsField">
                <div class="example__settingsValue"></div>
                <div class="example__settingsControl">
                    <input class="js-inputRange js-fontSize" data-css-prop="--fontSize" data-css-unit="rem" id="js-fontSize01" min="0.75" max="4" step="0.25" type="range" value="1">
                </div>
                <div class="example__settingsLabel">
                    <label for="js-fontSize01">font-size</label>
                </div>
            </div>
            <div class="example__settingsField">
                <div class="example__settingsValue"></div>
                <div class="example__settingsControl">
                    <input class="js-inputRange js-lineHeight" data-css-prop="--lineHeight" id="js-lineHeight01" min="1" max="3" step="0.1" type="range" value="1.5">
                </div>
                <div class="example__settingsLabel">
                    <label for="js-lineHeight01">line-height</label>
                </div>
            </div>
        </div>
        <div class="message message--before" style="--fontSize: 1rem; --lineHeight: 1.5">
            <div class="message__icon">
                <svg viewBox="0 0 16 16" class="message__svg">
                    <path fill="currentColor" d="M8 16A8 8 0 108 0a8 8 0 000 16zM7 4h2v2H7V4zm0 3h2v5H7V7z"></path>
                </svg>       
            </div>
            <div class="message__text">
                Maecenas faucibus mollis interdum. Natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
            </div>
        </div>
    </div>
</div>

.message {
    $b: &;
    
    --fontSize: 1rem;
    --lineHeight: 1.5;

    background-color: #cbeffb;
    border-radius: 5px;
    color: #1a2e3b;
    font-size: var(--fontSize);
    line-height: var(--lineHeight);
    
    &__icon {
        color: #00ADEF;
    }
    
    &--before {
        padding: 1.25rem 2.5rem 1.25rem 2.875rem;
        position: relative;
        
        #{$b}__icon {
            position: absolute;
            left: 1.25rem;
        }
        
        #{$b}__svg {
            display: inline-block;
            height: 1rem;
            vertical-align: middle;
            width: 1rem;
        }
    }
}






*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    color: #141414;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
    line-height: 1.5;
    margin: 0;
}

.shell {
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) { 
    .shell {
        max-width: 70vw;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.example {
    background-color: #f5f9f9;
    padding: 1rem;
    
    &__heading {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 0.5em;
    }
    
    &__settings {
        background-color: #d8e3e7;
        border: 1px solid #c0d2d8;
        border-radius: 0.25rem;
        margin-bottom: 1rem;
        padding: 1rem;
    }

    &__settingsField {
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
        margin-bottom: 0.125rem;
    }

    &__settingsLabel {
        flex-shrink: 0;
        margin-right: 0.5rem;
        text-align: right;
        width: 80px;
    }

    &__settingsControl {
        display: flex;
        margin-right: 0.5rem;
    }

    &__settingsValue {
        background-color: hotpink;
        border-radius: 0.25rem;
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 0.875rem;
        padding: 0 0.25rem;
    }
}

const examples = document.querySelectorAll('.example');

Array.from(examples).forEach((example) => {
    const ranges = example.querySelectorAll('.js-inputRange');
    const element = example.querySelector('.message');
    
    Array.from(ranges).forEach((range) => {
        range.addEventListener('input', () => {
            element.style.setProperty(range.dataset.cssProp, `${range.value}${range.dataset.cssUnit ?? ''}`);
            
            const output = range.parentElement.previousElementSibling;
            output.textContent = `${range.value}${range.dataset.cssUnit ?? ''}`;
        })
    })
})