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

@layer base {
  body {
    @apply m-0 flex h-screen items-center justify-center bg-purple-50 font-sans;
  }

  button {
    @apply flex cursor-pointer items-center justify-center rounded-xl bg-slate-600 p-4 text-xl text-white transition duration-100 ease-in-out hover:bg-slate-700 active:bg-slate-800;
  }
}

@layer components {
  .calculator {
    @apply grid grid-cols-4 gap-2 rounded-xl bg-slate-950 p-4 shadow-lg;
  }

  .number {
    @apply flex cursor-pointer items-center justify-center rounded-xl bg-slate-600 p-4 text-xl text-white transition duration-100 ease-in-out hover:bg-slate-700 active:bg-slate-800;
    &[data-value='0'] {
      @apply col-span-3;
    }
  }

  .operator {
    @apply bg-orange-500 hover:bg-orange-600 active:bg-orange-700;
  }

  #equals {
    @apply col-span-2 col-start-3 bg-green-500 hover:bg-green-600 active:bg-green-700;
  }

  #clear {
    @apply bg-red-500 hover:bg-red-600 active:bg-red-700;
  }

  .display {
    @apply col-span-4 block rounded-md border-cyan-200 bg-cyan-100 p-4 text-right text-2xl font-semibold text-cyan-800 outline outline-2 outline-transparent;
  }
}