{% if not islogged %}
    <div class="dsl-wrap">
        <style>
            {% for provider in providers %}
            .dsl_{{ provider['id'] }}_button {
                background-color: {{ provider['background_color'] }}
            }

            .{{ provider['id'] }}_icon {
                background-image: url('catalog/view/theme/default/stylesheet/d_social_login/icons/{{ provider['id'] }}.svg');
            }

            .dsl_{{ provider['id'] }}_button:hover {
                background-color: {{ provider['background_color_hover'] }}
            }

            .dsl_{{ provider['id'] }}_button:active {
                background-color: {{ provider['background_color_active'] }}
            }

            {% endfor %}
            /*//get values forom config*/
            {% for class,size in sizes %}
            .{{ class }} .r-side, .dsl-label.{{ class }} {
                font-size: {{ size['font-size'] }};
                padding: {{ size.padding }}{#{% for keyattr,attr_value in size %}{{ keyattr }}:{{ attr_value }};{% endfor %}#}
            }
            .{{ class }} .l-side {
                padding:{{ size.padding }};
                width: {{ size.width }};
            }


            {% if class=='icons' %}
            .{{ class }} .l-side {
                padding-top: {{ size.width/4 }}px;
                padding-bottom: {{ size.width/4 }}px;
                padding-right: {{ size.width/8 }}px;
                padding-left: {{ size.width/8 }}px;
                width: {{ size.width }};
            }
            .{{ class }} .r-side {
                display: none;
            }

            .{{ class }} .l-side {
                padding: {{ size.padding }};;
                width: {{ size.width }};
            }

            {% if size['border-radius'] %}
            #d_social_login .dsl-button {
            / / border-radius: {{ size['border-radius'] }}
            }

            {% endif %}
            {% endif %}
            {% endfor %}
            #d_social_login > * {
                margin: 2px;
                margin-bottom: 10px;
            }

            /*into css*/
            .dsl-button:hover {
                box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.20);
                color: #fff;
            }

            .dsl-button {
                color: #fff;
                display: flex;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
                box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
                -webkit-transition: all .4s ease;
                -moz-transition: all .4s ease;
                -ms-transition: all .4s ease;
                -o-transition: all .4s ease;
                transition: all .4s ease;
            }

            .l-side {
                border-right: 1px solid rgba(255, 255, 255, 0.3);
            }

            .r-side {
                align-self: center;
            }

            .dsl-icon {
                display: inline-block;
                -webkit-background-size: contain;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                height: 100%;
                width: 100%;

            }

            #d_social_login {
                display: flex;
                flex-wrap: wrap;
            }

        </style>
        {% if (error) %}
            <div class="alert alert-warning">{{ error }}</div>
        {% endif %}
        <div id="d_social_login">
            <span class="dsl-label {{ size }}">{{ button_sign_in }}</span>
            {% for key,provider in providers %}
                {% if (provider['enabled']) %}
                    <a class="dsl-button dsl_{{ provider['id'] }}_button {{ size }} "
                       href="index.php?route=extension/module/d_social_login/login&provider={{ key }}">
        <span class="l-side">   <span class="dsl-icon {{ provider['id'] }}_icon "></span>
        </span> <span class="r-side">{{ provider['heading'] }}</span></a>
                {% endif %}
            {% endfor %}
        </div>
    </div>
{% endif %}