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

@layer base {
  * {
    @apply text-white box-border;
  }
  body {
    @apply dark:bg-mixed-100 bg-primary-600;
  }
  input,
  select {
    @apply py-2 px-4 rounded-full dark:bg-mixed-200 bg-mixed-600 placeholder:text-dark-500;
  }
  textarea {
    @apply dark:bg-mixed-200 bg-primary-600 rounded-md p-1;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-bold;
  }
  p {
    @apply py-1;
  }
}

@layer components {
  .strapline {
    @apply dark:text-primary-500 text-primary-100 uppercase font-bold mb-2 text-lg;
  }

  .heading {
    @apply pb-6 mb-6 border-b border-b-primary-500 dark:border-b-dark-500 min-w-full;
  }
  .heading h1 {
    @apply text-5xl font-bold;
  }

  .card {
    @apply dark:bg-mixed-200 bg-primary-500 rounded-3xl p-6 shadow-2xl 
    /* mix-blend-luminosity */
    /* @apply bg-mixed-200 rounded-3xl p-6 shadow-2xl */;
  }

  .btn {
    @apply rounded-full;
  }
  .btn-primary {
    @apply dark:bg-primary-500 bg-primary-100 py-4 px-6 dark:text-mixed-100 text-white font-bold text-lg btn;
  }
  .btn-secondary {
    @apply dark:text-primary-500 text-primary-100 py-4 px-6 font-bold text-lg;
  }
  .btn-small {
    @apply px-2 py-1;
  }
  .p {
    @apply pb-1;
  }

  .poppable {
    @apply card dark:bg-mixed-300 bg-primary-600 p-2 rounded-lg transition-opacity data-[visible=true]:z-10 data-[visible=true]:opacity-100 data-[visible=false]:opacity-0 -z-10 max-w-[400px] absolute;
  }

  .skeleton {
    @apply animate-pulse bg-black/20 rounded-md text-white/0;
  }

  /* .accordion {
    @apply first-of-type:rounded-t-md last-of-type:rounded-b-md;
  } */
  .accordion:not(.accordion + .accordion) {
    @apply rounded-t-md;
  }
  .accordion:has(+ .accordion) {
    @apply border-b border-black/20 dark:border-white/20;
  }
  .accordion:not(:has(+ .accordion)) {
    @apply rounded-b-md;
  }

  .md-table {
    @apply bg-black/20 rounded-md overflow-clip;
  }
  .md-table td,
  .md-table th {
    @apply px-4 border border-black/20 dark:border-white/20;
  }
}

@layer utilities {
  .fade-toast {
    animation: fadeOut 300ms forwards;
  }
}

@keyframes identifier {
}

@layer utilities {
  .list-1 {
    /* @apply list-[square]; */
    list-style: square;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}