{if empty($variant)}
    {$variant = 'primary'}
{/if}
{et_getButtonSettings type=$variant assign='buttonConfig'}
{$buttonId = ''}
{if !empty($id)}
    {$buttonId = $id}
{/if}
{if !isset($isPrepended)}
    {$isPrepended = false}
{/if}
{if !isset($isAppended)}
    {$isAppended = false}
{/if}
{if !isset($hoverStyle) && !empty($buttonConfig.hoverStyle)}
    {$hoverStyle = "{$buttonConfig.hoverStyle}"}
{/if}
{if !isset($iconPosition) && !empty($buttonConfig.iconPosition)}
    {$iconPosition = "{$buttonConfig.iconPosition}"}
{/if}
{if !isset($icon)}
    {et_getIcon key="button{ucfirst($variant)}" assign='icon'}
{/if}
{if !empty($buttonConfig.borderRadius.xs) || !empty($buttonConfig.borderRadius.sm) || !empty($buttonConfig.borderRadius.md) || !empty($buttonConfig.borderRadius.lg) || !empty($buttonConfig.borderRadius.xl) ||
    !empty($buttonConfig.borderSize.xs) || !empty($buttonConfig.borderSize.sm) || !empty($buttonConfig.borderSize.md) || !empty($buttonConfig.borderSize.lg) || !empty($buttonConfig.borderSize.xl) ||
    !empty($buttonConfig.width.xs) || !empty($buttonConfig.width.sm) || !empty($buttonConfig.width.md) || !empty($buttonConfig.width.lg) || !empty($buttonConfig.width.xl) ||
    !empty($buttonConfig.height.xs) || !empty($buttonConfig.height.sm) || !empty($buttonConfig.height.md) || !empty($buttonConfig.height.lg) || !empty($buttonConfig.height.xl)}
    {if empty($buttonId)}
        {$buttonId = "button-{md5(random_bytes(16))}"}
    {/if}
    {if empty($et_global)}
        {et_getGlobalVariable assign='et_global'}
    {/if}
    <style type="text/css">
        {if !empty($buttonConfig.borderRadius.xs)} @media (max-width: {$et_global.breakpoints.xsMax}px) { #{$buttonId} {
            {if !$isAppended}
                border-top-left-radius:{$buttonConfig.borderRadius.xs}px;
                border-top-right-radius:{$buttonConfig.borderRadius.xs}px;
            {/if}
            {if !$isPrepended}
                border-bottom-left-radius:{$buttonConfig.borderRadius.xs}px;
                border-bottom-right-radius:{$buttonConfig.borderRadius.xs}px;
            {/if}
        } }{/if}
        {if !empty($buttonConfig.borderRadius.sm)} @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) { #{$buttonId} {
            {if !$isAppended}
                border-top-left-radius:{$buttonConfig.borderRadius.sm}px;
                border-top-right-radius:{$buttonConfig.borderRadius.sm}px;
            {/if}
            {if !$isPrepended}
                border-bottom-left-radius:{$buttonConfig.borderRadius.sm}px;
                border-bottom-right-radius:{$buttonConfig.borderRadius.sm}px;
            {/if}
        } }{/if}
        {if !empty($buttonConfig.borderRadius.md)} @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) { #{$buttonId} {
            {if !$isAppended}
                border-top-left-radius:{$buttonConfig.borderRadius.md}px;
                border-top-right-radius:{$buttonConfig.borderRadius.md}px;
            {/if}
            {if !$isPrepended}
                border-bottom-left-radius:{$buttonConfig.borderRadius.md}px;
                border-bottom-right-radius:{$buttonConfig.borderRadius.md}px;
            {/if}
        } }{/if}
        {if !empty($buttonConfig.borderRadius.lg)} @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) { #{$buttonId} {
            {if !$isAppended}
                border-top-left-radius:{$buttonConfig.borderRadius.lg}px;
                border-top-right-radius:{$buttonConfig.borderRadius.lg}px;
            {/if}
            {if !$isPrepended}
                border-bottom-left-radius:{$buttonConfig.borderRadius.lg}px;
                border-bottom-right-radius:{$buttonConfig.borderRadius.lg}px;
            {/if}
        } }{/if}
        {if !empty($buttonConfig.borderRadius.xl)} @media (min-width: {$et_global.breakpoints.xlMin}px) { #{$buttonId} {
            {if !$isAppended}
                border-top-left-radius:{$buttonConfig.borderRadius.xl}px;
                border-top-right-radius:{$buttonConfig.borderRadius.xl}px;
            {/if}
            {if !$isPrepended}
                border-bottom-left-radius:{$buttonConfig.borderRadius.xl}px;
                border-bottom-right-radius:{$buttonConfig.borderRadius.xl}px;
            {/if}
        } }{/if}
        {if !empty($buttonConfig.borderSize.xs)} @media (max-width: {$et_global.breakpoints.xsMax}px) { #{$buttonId} { border-width:{$buttonConfig.borderSize.xs}px; } }{/if}
        {if !empty($buttonConfig.borderSize.sm)} @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) { #{$buttonId} { border-width:{$buttonConfig.borderSize.sm}px; } }{/if}
        {if !empty($buttonConfig.borderSize.md)} @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) { #{$buttonId} { border-width:{$buttonConfig.borderSize.md}px; } }{/if}
        {if !empty($buttonConfig.borderSize.lg)} @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) { #{$buttonId} { border-width:{$buttonConfig.borderSize.lg}px; } }{/if}
        {if !empty($buttonConfig.borderSize.xl)} @media (min-width: {$et_global.breakpoints.xlMin}px) { #{$buttonId} { border-width:{$buttonConfig.borderSize.xl}px; } }{/if}

        {if !empty($buttonConfig.width.xs)} @media (max-width: {$et_global.breakpoints.xsMax}px) { #{$buttonId} { width:{$buttonConfig.width.xs}px; } }{/if}
        {if !empty($buttonConfig.width.sm)} @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) { #{$buttonId} { width:{$buttonConfig.width.sm}px; } }{/if}
        {if !empty($buttonConfig.width.md)} @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) { #{$buttonId} { width:{$buttonConfig.width.md}px; } }{/if}
        {if !empty($buttonConfig.width.lg)} @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) { #{$buttonId} { width:{$buttonConfig.width.lg}px; } }{/if}
        {if !empty($buttonConfig.width.xl)} @media (min-width: {$et_global.breakpoints.xlMin}px) { #{$buttonId} { width:{$buttonConfig.width.xl}px; } }{/if}

        {if !empty($buttonConfig.height.xs)} @media (max-width: {$et_global.breakpoints.xsMax}px) { #{$buttonId} { height:{$buttonConfig.height.xs}px; } }{/if}
        {if !empty($buttonConfig.height.sm)} @media (min-width: {$et_global.breakpoints.smMin}px) and (max-width: {$et_global.breakpoints.smMax}px) { #{$buttonId} { height:{$buttonConfig.height.sm}px; } }{/if}
        {if !empty($buttonConfig.height.md)} @media (min-width: {$et_global.breakpoints.mdMin}px) and (max-width: {$et_global.breakpoints.mdMax}px) { #{$buttonId} { height:{$buttonConfig.height.md}px; } }{/if}
        {if !empty($buttonConfig.height.lg)} @media (min-width: {$et_global.breakpoints.lgMin}px) and (max-width: {$et_global.breakpoints.lgMax}px) { #{$buttonId} { height:{$buttonConfig.height.lg}px; } }{/if}
        {if !empty($buttonConfig.height.xl)} @media (min-width: {$et_global.breakpoints.xlMin}px) { #{$buttonId} { height:{$buttonConfig.height.xl}px; } }{/if}
    </style>
{/if}
{block name="et-button"}
    <{if empty($href)}button{if !empty($type)} type="{$type}"{/if}{else}a href="{$href}"{if !empty($isExternal)} rel="noreferrer noopener" target="_blank"{elseif !empty($target)} target="{$target}"{/if}{/if}
            class="{block name="et-button-class"}btn btn-{$variant}{if !empty($hoverStyle)} et-hover-{$hoverStyle}{/if}{if !empty($iconPosition)} et-icon-position-{$iconPosition}{/if}{if !empty($classes)} {$classes}{/if}{/block}{block name="et-button-class-additional"}{/block}"
            {if !empty($title)} title="{$title|escape:'html'}"{/if}
            {if !empty($buttonId)} id="{$buttonId}"{/if}
            {if !empty($name)} name="{$name}"{/if}
            {if !empty($value)} value="{$value}"
            {elseif isset($emptyValue) && $emptyValue} value=""{/if}
            {if !empty($disabled) && $disabled} disabled{/if}
            {if !empty($ariaLabel)} aria-label="{$ariaLabel}"{/if}
            {if !empty($ariaControls)} aria-controls="{$ariaControls}"{/if}
            {if !empty($ariaExpanded)} aria-expanded="{$ariaExpanded}"{/if}
            {if !empty($dataToggle)} data-toggle="{$dataToggle}"{/if}
            {if !empty($dataTarget)} data-target="{$dataTarget}"{/if}
            {if !empty($dataPlacement)} data-placement="{$dataPlacement}"{/if}
            {if !empty($dataDismiss)} data-dismiss="{$dataDismiss}"{/if}
            {if !empty($role)} role="{$role}"{/if}
            {if !empty($cssStyle)} style="{$cssStyle}"{/if}
            {if !empty($onClick)} onclick="{$onClick}"{/if}
    >
        {block name="et-button-content"}
            {if !empty($iconPosition) && $iconPosition === 'left'}{if !empty($iconRaw)}{$iconRaw}{elseif !empty($icon)}<i class="{$icon}"></i>{/if}{/if}
            {$label}
            {if !empty($iconPosition) && $iconPosition === 'right'}{if !empty($iconRaw)}{$iconRaw}{elseif !empty($icon)}<i class="{$icon}"></i>{/if}{/if}
        {/block}
    </{if empty($href)}button{else}a{/if}>
{/block}