@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-stone-650 dark:text-white
    dark:hover:bg-zeus-900 dark:bg-none dark:border-none dark:shadow-active_dark cloudy:hover:!bg-coffee-500 cloudy:hover:bg-none
    cloudy:bg-none cloudy:shadow-active cloudy:border-coffee-300;
  }

  .smart-button .icon-block::before {
    @apply bg-white dark:bg-zeus-800;
    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-stone-100 hover:scale-105 transition-all duration-300 hover:bg-purple-50 dark:bg-stone-650 dark:text-white
    dark:bg-none dark:border-zeus-800 cloudy:bg-white cloudy:border-coffee-300
    cloudy:hover:!bg-coffee-500 cloudy:hover:!bg-none cloudy:bg-none cloudy:shadow-active dark:shadow-active_dark dark:hover:!bg-none
    dark:hover:bg-zeus-900;
  }

  .tool-button .icon-block::before {
    @apply bg-white dark:bg-zeus-800;
    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.5rem;
      height: 1.5rem;
    }
    .smart-button select { text-align-last: left; }
  }

  .nav-button {
    @apply font-medium md:text-sm text-xs leading-xllg text-stone-700 p-1 pr-2 radio-button bg-stone-200 text-stone-600
    hover:text-black hover:bg-azure-300 border md:gap-2 gap-1 cloudy:hover:bg-coffee-500 cloudy:border-coffee-500
    dark:text-zinc-500 dark:bg-zeus-800 dark:border-zeus-800 dark:hover:bg-zeus-900 dark:hover:text-white;
  }
  .nav-button:hover svg {
    @apply cloudy:stroke-black;
  }

  .nav-button.active {
    @apply border-azure-500 bg-azure-300 shadow-active text-black cloudy:border-coffee-300 cloudy:bg-white dark:bg-stone-650 dark:text-white
    dark:shadow-active_dark dark:border-zeus-800;
  }

  .primary-button {
    @apply flex flex-1 justify-center items-center min-w-0 gap-2 rounded-2xl bg-violet-400 text-white cloudy:bg-white cloudy:text-black
    cloudy:border cloudy:border-gray-400 cloudy:hover:bg-coffee-500 dark:bg-stone-650 dark:hover:bg-zeus-900 dark:shadow-active_dark dark:border dark:border-gray-500;
  }

  .element-button {
    @apply bg-stone-200 dark:text-white dark:bg-stone-650 dark:hover:bg-zeus-900 dark:shadow-active_dark cloudy:bg-white cloudy:shadow-active cloudy:hover:bg-coffee-500;
  }

  .element-button-icon {
    @apply bg-white cloudy:bg-coffee-500;
  }

  .element-button:hover .element-button-icon {
    @apply cloudy:bg-coffee-100;
  }
}

.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;
}