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

@layer base {
  .smart-button {
    @apply cursor-pointer items-center text-center md:gap-3 gap-2 z-10 md:rounded-[1.25rem] rounded-2xl bg-zinc-50 hover:scale-105 transition-all duration-300 hover:bg-purple-50 dark:bg-haiti-700 dark:text-white dark:hover:bg-haiti-600 dark:bg-none dark:border-none;
  }

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

  .tool-button {
    @apply cursor-pointer md:flex-row items-center md:justify-start justify-center md:gap-2 gap-3 z-10 md:rounded-xl rounded-3xl bg-white hover:scale-105 transition-all duration-300 hover:bg-purple-50 dark:bg-haiti-700 dark:text-white dark:hover:bg-haiti-600 dark:bg-none dark:border-none;
  }

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

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

  .smart-button select {
    background: linear-gradient(196.76deg, #F2D9FF 11.09%, #F5FAFF 85.66%);
    border: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: none;
    text-align-last: center;
  }

  @media (max-width: 768px) {
    .smart-button .icon-block::before {
      width: 1.25rem;
      height: 1.25rem;
    }
    .smart-button select { text-align-last: left; }
  }
}

.tool-button:first-child {
  border: 1px solid #F61DFF1A;
}

.tool-button:nth-child(2) {
  border: 1px solid #007AFF1A;
}

.smart-button:nth-child(1), .tool-button:nth-child(3) {
  border: 1px solid #9406FF1A;
}

.smart-button:nth-child(2), .tool-button:nth-child(4) {
  border: 1px solid #9406FF1A;
}

.smart-button:nth-child(3), .tool-button:nth-child(5) {
  border: 1px solid #9406FF1A;
}

.smart-button:nth-child(4), .tool-button:nth-child(6) {
  border: 1px solid #007AFF1A;
}

.smart-button:nth-child(5), .tool-button:nth-child(7) {
  border: 1px solid #F61DFF1A;
}

.smart-button:nth-child(6), .tool-button:nth-child(8) {
  border: 1px solid #9406FF1A;
}

.tool-button:nth-child(9) {
  border: 1px solid #007AFF1A;
}