{{ field.renderContainerOpeningTag }}

    {{ field.renderLabel }}
    {{ field.renderInstructions }}

    <ul class="w-full text-sm font-medium border border-zinc-500 rounded flex">
        {% for scale in field.scales %}
            <li class="w-full">
                <input type="radio" name="{{ field.handle }}"
                    value="{{ scale.value }}"
                    id="{{ field.idAttribute }}-{{ loop.index }}"
                    {{ field.value == scale.value ? "checked" }}
                    class="hidden peer"
                 />
                <label for="{{ field.idAttribute }}-{{ loop.index }}"
                    class="inline-flex text-center w-full py-2 px-3 text-zinc-200 bg-zinc-900 cursor-pointer peer-checked:bg-zinc-700 hover:bg-black
                        {% if loop.index == 1 %}
                            border-r border-zinc-400 rounded-tl rounded-bl
                        {% elseif loop.index == field.scales|length %}
                            rounded-tr rounded-br
                        {% else %}
                            border-r border-zinc-400
                        {% endif %}">
                    {{ scale }}
                </label>
            </li>
        {% endfor %}
    </ul>

    {% if field.legends %}
        <ul class="w-full text-sm font-medium flex text-zinc-500">
            {% for legend in field.legends %}
                <li class="w-full
                    {% if loop.index == 1 %}
                        text-left
                    {% elseif loop.index == field.legends|length %}
                        text-right
                    {% else %}
                        text-center
                    {% endif %}">
                    {{ legend }}
                </li>
            {% endfor %}
        </ul>
    {% endif %}

    {{ field.renderErrors }}

{{ field.renderContainerClosingTag }}
