{# Mobile #}
<button type="button"
        class="flex lg:hidden h-14 flex-col border-y border-r border-gray-200 px-3 py-4 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white"
        {% if is_in_current_month %}data-is-in-current-month{% endif %}
        {% if is_today %}data-is-today{% endif %}>
  <time datetime="{{ date }}"
        class="ml-auto flex size-6 items-center justify-center rounded-full in-data-is-today:bg-accent in-data-is-today:font-semibold in-data-is-today:text-white">
    {{ day }}
  </time>
</button>
{# Desktop #}
<div class="hidden lg:block group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white"
     {% if is_in_current_month %}data-is-in-current-month{% endif %}
     {% if is_today %}data-is-today{% endif %}>
  <time datetime="{{ date }}"
        class="relative group-not-data-is-in-current-month:opacity-75 in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-accent in-data-is-today:font-semibold in-data-is-today:text-white">
    {{ day }}
  </time>
  {{ slot }}
</div>