{#
/**
 * @file
 *   Styled button.
 *
 * @param 'primary'|'secondary'|'tertiary' $theme
 * @param boolean $icon_only
 * @param 's'|'m'|'l' $size
 */
#}

{% extends '@ui/Button/Button.twig' %}

{% set icon_position = icon_position ?? 'start' %}
{% set icon_only = icon_only ?? false %}

{% set theme = theme|default('primary') %}

{% set size = size ?? 'm' %}
{% if size not in ['s', 'm', 'l'] %}
  {% set size = 'm' %}
{% endif %}

{% set theme_shared = [
  'rounded cursor-pointer transition',
  'disabled:cursor-not-allowed',
  {
    'inline-block': icon is not defined,
    'inline-flex items-center': icon is defined,
    'px-6 py-4': size == 'l' and not icon_only,
    'px-3 py-2': size == 'm' and not icon_only,
    'px-2.5 py-1.5': size == 's' and not icon_only,
    'p-4': size == 'l' and icon_only,
    'p-3': size == 'm' and icon_only,
    'p-2': size == 's' and icon_only,
    'text-sm': size == 's'
  }
] %}

{% set theme_primary = [
  'text-white bg-black dark:text-black dark:bg-white',
  'hover:bg-black/75 dark:hover:bg-white/75',
  'disabled:bg-black/50 dark:disabled:bg-white/50',
] %}

{% set theme_secondary = [
  'ring ring-inset ring-2 ring-black/25 dark:ring-white/25',
  {
    'hover:ring-black dark:hover:ring-white': (attr is defined and attr.disabled is not defined)
      or attr is not defined
  }
] %}

{% set attr =
  merge_html_attributes(
    attr ?? null,
    null,
    {
      class: [
        theme_shared,
        theme == 'primary' ? theme_primary : '',
        theme == 'secondary' ? theme_secondary : ''
      ]
    }
  )
%}

{% set icon_attr =
  merge_html_attributes(
    icon_attr ?? null,
    {
      class: 'h-[0.75lh]'
    },
    {
      class: {
        'mr-3': size == 'l' and not icon_only and icon_position == 'start',
        'ml-3': size == 'l' and not icon_only and icon_position == 'end',
        'mr-2': size == 'm' and not icon_only and icon_position == 'start',
        'ml-2': size == 'm' and not icon_only and icon_position == 'end',
        'mr-1': size == 's' and not icon_only and icon_position == 'start',
        'ml-1': size == 's' and not icon_only and icon_position == 'end'
      }
    }
  )
%}