@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .smart-button {
    @apply cursor-pointer items-center text-center gap-3 z-10 rounded-[3rem] bg-zinc-50 hover:text-azure-600 hover:bg-stone-200 dark:bg-haiti-700 dark:text-white dark:hover:bg-haiti-600;
  }

  .smart-button .icon-block::before {
    @apply bg-white dark:bg-haiti-500;
    content: '';
    position: absolute;
    width: 3rem;
    height: 3rem;
    padding: 1px;
    border-radius: 50%;
    z-index: -1;
  }

  .note-mobile-buttons{
    a { display: flex; }
  }

  .smart-button {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    text-align-last: center
  }
}