{% set properties = item.properties|json_decode %}

{{ StyleHelper.generatePresetSelector('.moto-widget-button.moto-preset-provider-custom', item.class_name) }} {
    .moto-widget-button-link {
        {{ StyleHelper.generateLessFromArray(properties.link.desktop.base) }}
        &:hover {
            {{ StyleHelper.generateLessFromArray(properties.link.desktop.hover) }}
            {{ StyleHelper.generateLessFromArray(properties.label.desktop.hover, '.moto-widget-button-label') }}
        }

        {{ StyleHelper.generateLessFromArray(properties.label.desktop.base, '.moto-widget-button-label') }}

        &.moto-size-small {
            {{ StyleHelper.generateLessFromArray(properties.link_small.desktop.base) }}
            {{ StyleHelper.generateLessFromArray(properties.label_small.desktop.base, '.moto-widget-button-label') }}
            @media screen and (max-width: @const_media_tablet_max_width) {
                {{ StyleHelper.generateLessFromArray(properties.link_small.tablet.base) }}
                {{ StyleHelper.generateLessFromArray(properties.label_small.tablet.base, '.moto-widget-button-label') }}
            }
            @media screen and (max-width: @const_media_mobile-h_max_width) {
                {{ StyleHelper.generateLessFromArray(properties.link_small['mobile-h'].base) }}
                {{ StyleHelper.generateLessFromArray(properties.label_small['mobile-h'].base, '.moto-widget-button-label') }}
            }
            @media screen and (max-width: @const_media_mobile-v_max_width) {
                {{ StyleHelper.generateLessFromArray(properties.link_small['mobile-v'].base) }}
                {{ StyleHelper.generateLessFromArray(properties.label_small['mobile-v'].base, '.moto-widget-button-label') }}
            }
        }

        &.moto-size-medium {
            {{ StyleHelper.generateLessFromArray(properties.link_medium.desktop.base) }}
            {{ StyleHelper.generateLessFromArray(properties.label_medium.desktop.base, '.moto-widget-button-label') }}
            @media screen and (max-width: @const_media_tablet_max_width) {
                {{ StyleHelper.generateLessFromArray(properties.link_medium.tablet.base) }}
                {{ StyleHelper.generateLessFromArray(properties.label_medium.tablet.base, '.moto-widget-button-label') }}
            }
            @media screen and (max-width: @const_media_mobile-h_max_width) {
                {{ StyleHelper.generateLessFromArray(properties.link_medium['mobile-h'].base) }}
                {{ StyleHelper.generateLessFromArray(properties.label_medium['mobile-h'].base, '.moto-widget-button-label') }}
            }
            @media screen and (max-width: @const_media_mobile-v_max_width) {
                {{ StyleHelper.generateLessFromArray(properties.link_medium['mobile-v'].base) }}
                {{ StyleHelper.generateLessFromArray(properties.label_medium['mobile-v'].base, '.moto-widget-button-label') }}
            }
        }

        &.moto-size-large {
            {{ StyleHelper.generateLessFromArray(properties.link_large.desktop.base) }}
            {{ StyleHelper.generateLessFromArray(properties.label_large.desktop.base, '.moto-widget-button-label') }}
            @media screen and (max-width: @const_media_tablet_max_width) {
                {{ StyleHelper.generateLessFromArray(properties.link_large.tablet.base) }}
                {{ StyleHelper.generateLessFromArray(properties.label_large.tablet.base, '.moto-widget-button-label') }}
            }
            @media screen and (max-width: @const_media_mobile-h_max_width) {
                {{ StyleHelper.generateLessFromArray(properties.link_large['mobile-h'].base) }}
                {{ StyleHelper.generateLessFromArray(properties.label_large['mobile-h'].base, '.moto-widget-button-label') }}
            }
            @media screen and (max-width: @const_media_mobile-v_max_width) {
                {{ StyleHelper.generateLessFromArray(properties.link_large['mobile-v'].base) }}
                {{ StyleHelper.generateLessFromArray(properties.label_large['mobile-v'].base, '.moto-widget-button-label') }}
            }
        }

        {% if properties.extra.full_width %}
            width: 100%;
        {% elseif isPreview %}
            width: auto;
        {% endif %}
    }

    {% set iconType = properties.icon.desktop.before['moto-icon-for-pseudo-element'].iconType %}
    {% set iconTypeLegacy = properties.icon.desktop.before['moto-icon-for-pseudo-element'].icon_type %}
    {% set isIconSet = properties.icon.desktop.before['moto-icon-for-pseudo-element'][iconType] or properties.icon.desktop.before['moto-icon-for-pseudo-element'][iconTypeLegacy] %}

    {% if isIconSet %}
        .moto-widget-button-link {
            .moto-widget-theme-icon {
                display: inline-flex;
                {{ StyleHelper.generateLessFromArray(properties.icon.desktop.base) }}
                &:before {
                    {{ StyleHelper.generateLessFromArray(properties.icon.desktop.before) }}
                }
            }
            {% if properties.divider.enabled %}
                .moto-widget-button-divider {
                    {% if isPreview %}
                        margin: 0;
                        border-width: 0;
                    {% endif %}
                    display: block;
                    {% if properties.extra.icon_position == 'left' or properties.extra.icon_position == 'right' %}
                        width: 1px;
                        height: {{ properties.divider.desktop.base.size }};
                    {% else %}
                        width: {{ properties.divider.desktop.base.size }};
                        height: 1px;
                    {% endif %}
                    margin-{{properties.extra.icon_position}}: {{ properties.divider.desktop.base['offset'] }};
                    border-{{properties.extra.icon_position}}-width: {{ properties.divider.desktop.base.thickness }};
                    border-color: {{ StyleHelper.generateLessFromArray(properties.divider.desktop.base['border-color']) }};
                    border-style: {{ properties.divider.desktop.base['border-style'] }};
                }
                &:hover {
                    .moto-widget-button-divider {
                        border-color: {{ StyleHelper.generateLessFromArray(properties.divider.desktop.hover['border-color']) }};
                    }
                 }
            {% elseif isPreview %}
                .moto-widget-button-divider{
                    display: none;
                }
            {% endif %}
            &:hover .moto-widget-theme-icon {
                {{ StyleHelper.generateLessFromArray(properties.icon.desktop.hover) }}
            }
            &.moto-size-small .moto-widget-theme-icon {
                {{ StyleHelper.generateLessFromArray(properties.icon_small.desktop.base) }}
                @media screen and (max-width: @const_media_tablet_max_width) {
                    {{ StyleHelper.generateLessFromArray(properties.icon_small.tablet.base) }}
                }
                @media screen and (max-width: @const_media_mobile-h_max_width) {
                    {{ StyleHelper.generateLessFromArray(properties.icon_small['mobile-h'].base) }}
                }
                @media screen and (max-width: @const_media_mobile-v_max_width) {
                    {{ StyleHelper.generateLessFromArray(properties.icon_small['mobile-v'].base) }}
                }
            }

            &.moto-size-medium .moto-widget-theme-icon {
                {{ StyleHelper.generateLessFromArray(properties.icon_medium.desktop.base) }}
                @media screen and (max-width: @const_media_tablet_max_width) {
                    {{ StyleHelper.generateLessFromArray(properties.icon_medium.tablet.base) }}
                }
                @media screen and (max-width: @const_media_mobile-h_max_width) {
                    {{ StyleHelper.generateLessFromArray(properties.icon_medium['mobile-h'].base) }}
                }
                @media screen and (max-width: @const_media_mobile-v_max_width) {
                    {{ StyleHelper.generateLessFromArray(properties.icon_medium['mobile-v'].base) }}
                }
            }

            &.moto-size-large .moto-widget-theme-icon {
                {{ StyleHelper.generateLessFromArray(properties.icon_large.desktop.base) }}
                @media screen and (max-width: @const_media_tablet_max_width) {
                    {{ StyleHelper.generateLessFromArray(properties.icon_large.tablet.base) }}
                }
                @media screen and (max-width: @const_media_mobile-h_max_width) {
                    {{ StyleHelper.generateLessFromArray(properties.icon_large['mobile-h'].base) }}
                }
                @media screen and (max-width: @const_media_mobile-v_max_width) {
                    {{ StyleHelper.generateLessFromArray(properties.icon_large['mobile-v'].base) }}
                }
            }


            {% if properties.extra.icon_absolute %}
                .moto-widget-theme-icon {
                    position: absolute;
                    {% if isPreview %}
                        top: auto;
                        left: auto;
                        right: auto;
                        bottom: auto;
                    {% endif %}
                    {{ properties.extra.icon_position }}: 0;
                }
                {% if isPreview %}
                    &.moto-size-small,
                    &.moto-size-medium,
                    &.moto-size-large {
                        .moto-widget-button-label {
                            margin: 0;
                        }
                    }
                {% endif %}
            {% else %}
                {% if isPreview %}
                    .moto-widget-theme-icon {
                        position: relative;
                    }
                {% endif %}
                {% if properties.extra.icon_position == 'left' %}
                    flex-direction: row;
                {% elseif properties.extra.icon_position == 'right' %}
                    flex-direction: row-reverse;
                {% elseif properties.extra.icon_position == 'top' %}
                    flex-direction: column;
                {% elseif properties.extra.icon_position == 'bottom' %}
                    flex-direction: column-reverse;
                {% endif %}

                &.moto-size-small .moto-widget-button-label {
                    {% if isPreview %}margin: 0;{% endif %}
                    margin-{{ properties.extra.icon_position }}: {{ properties.icon_spacing_small.desktop.base.value }};
                    {% if properties.icon_spacing_small.tablet.base.value %}@media screen and (max-width: @const_media_tablet_max_width) { margin-{{ properties.extra.icon_position }}: {{ properties.icon_spacing_small.tablet.base.value }}; }{% endif %}
                    {% if properties.icon_spacing_small['mobile-h'].base.value %}@media screen and (max-width: @const_media_mobile-h_max_width) { margin-{{ properties.extra.icon_position }}: {{ properties.icon_spacing_small['mobile-h'].base.value }}; }{% endif %}
                    {% if properties.icon_spacing_small['mobile-v'].base.value %}@media screen and (max-width: @const_media_mobile-v_max_width) { margin-{{ properties.extra.icon_position }}: {{ properties.icon_spacing_small['mobile-v'].base.value }}; }{% endif %}
                }
                &.moto-size-medium .moto-widget-button-label {
                    {% if isPreview %}margin: 0;{% endif %}
                    margin-{{ properties.extra.icon_position }}: {{ properties.icon_spacing_medium.desktop.base.value }};
                    {% if properties.icon_spacing_medium.tablet.base.value %}@media screen and (max-width: @const_media_tablet_max_width) { margin-{{ properties.extra.icon_position }}: {{ properties.icon_spacing_medium.tablet.base.value }}; }{% endif %}
                    {% if properties.icon_spacing_medium['mobile-h'].base.value %}@media screen and (max-width: @const_media_mobile-h_max_width) { margin-{{ properties.extra.icon_position }}: {{ properties.icon_spacing_medium['mobile-h'].base.value }}; }{% endif %}
                    {% if properties.icon_spacing_medium['mobile-v'].base.value %}@media screen and (max-width: @const_media_mobile-v_max_width) { margin-{{ properties.extra.icon_position }}: {{ properties.icon_spacing_medium['mobile-v'].base.value }}; }{% endif %}
                }
                &.moto-size-large .moto-widget-button-label {
                    {% if isPreview %}margin: 0;{% endif %}
                    margin-{{ properties.extra.icon_position }}: {{ properties.icon_spacing_large.desktop.base.value }};
                    {% if properties.icon_spacing_large.tablet.base.value %}@media screen and (max-width: @const_media_tablet_max_width) { margin-{{ properties.extra.icon_position }}: {{ properties.icon_spacing_large.tablet.base.value }}; }{% endif %}
                    {% if properties.icon_spacing_large['mobile-h'].base.value %}@media screen and (max-width: @const_media_mobile-h_max_width) { margin-{{ properties.extra.icon_position }}: {{ properties.icon_spacing_large['mobile-h'].base.value }}; }{% endif %}
                    {% if properties.icon_spacing_large['mobile-v'].base.value %}@media screen and (max-width: @const_media_mobile-v_max_width) { margin-{{ properties.extra.icon_position }}: {{ properties.icon_spacing_large['mobile-v'].base.value }}; }{% endif %}
                }
            {% endif %}
        }
    {% elseif isPreview %}
        .moto-widget-button-link {
            .moto-widget-theme-icon {
                display: none;
            }
            &.moto-size-small,
            &.moto-size-medium,
            &.moto-size-large {
                .moto-widget-button-label {
                    margin: 0;
                }
            }
            .moto-widget-button-divider{
                display: none;
            }
        }
    {% endif %}
}