{% macro atomV1IconCss(iconDesign, className, selectorPrefix, hoverStylesOnContainerHover, isBaseBreakpoint) %}

    {% set selector = selectorPrefix ~ ' .' ~ className ~ '.breakdance-icon-atom' %}

    {% if hoverStylesOnContainerHover %}
        {% set hoverSelector = selectorPrefix ~ ':hover' ~ ' .' ~ className ~ '.breakdance-icon-atom' %}
    {% endif %}

    {{ selector }} {
        font-size: {{ iconDesign.size.style }};

        {% if iconDesign.style == "solid" or iconDesign.style == "outline" %}
            {% if isBaseBreakpoint %}
                {% if not iconDesign.padding.style %}
                    padding: 1em;
                {% endif %}

                {% if not iconDesign.background and iconDesign.style == "solid" %}
                    background: black;
                {% endif %}

                {% if not iconDesign.background and iconDesign.style == "outline" %}
                    background: white;
                {% endif %}

                {% if iconDesign.corners == "round" %}
                    border-radius: 999px;
                {% elseif iconDesign.corners == "custom" %}
                    border-radius: 4px;
                {% endif %}

                {% if iconDesign.style == "outline" %}
                    border: 4px solid var(--bde-brand-primary-color);
                {% endif %}
            {% endif %}

	        padding: {{ iconDesign.padding.style }};

            {% if iconDesign.corners == "custom" %}
                border-radius: {{ iconDesign.radius.style }};
            {% endif %}

            {{ _self.backgroundColor(iconDesign.background) }}

            {% if iconDesign.style == "outline" %}
                border-width: {{ iconDesign.outline_width.style }};
                border-color: {{ iconDesign.border }};
            {% endif %}

        {% endif %}
    }

    {% if iconDesign.nudge.x.style or iconDesign.nudge.y.style %}
        {{ selector }} svg {
            transform: translate({{ iconDesign.nudge.x.style|default('0px') }}, {{ iconDesign.nudge.y.style|default('0px') }});
        }
    {% endif %}

    {% if iconDesign.color %}
        {{ selector }} svg:first-child {
            {{ _self.svgColor(iconDesign.color, 'grad-%%ID%%') }}
        }
    {% endif %}

    {% if hoverSelector %}
        {{ hoverSelector }} {
            {{ _self.backgroundColor(iconDesign.background_hover) }};

            {% if iconDesign.style == "outline" %}
                border-color: {{ iconDesign.border_hover }};
            {% endif %}
        }

        {% if iconDesign.color_hover %}
            {{ hoverSelector }} svg:first-child {
                {{ _self.svgColor(iconDesign.color_hover, 'grad-hover-%%ID%%') }}
            }
        {% endif %}
    {% endif %}

{% endmacro %}


