@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);
@import "tailwindcss/utilities.css";

@config '../../tailwind.config.js';

@theme {
  --color-zpb-blue: #006bb1;
  --color-zpb-yellow: #fed30e;
  --color-zpb-beige: #ffffef;
  --color-zpb-darkBlue: #111827;
  --color-zpb-blueLight: #99b4df;
  --color-zpb-yellowLight: #fdeb98;
  --color-anthracite: #303433;
  --color-greenStudbook: #008000;
  --color-light-male: #1A72CB;
  --color-light-female: #DC4210;
  --color-light-inconnu: #362F78;
  --color-green-bd: #0F8843;
  --color-green-bg: #68B764;
  --color-light-death: #fecaca;
  --color-dark-death: #dc2626;
  --color-light-disappearance: #DFDBE7;
  --color-dark-disappearance: #9F8CB7;
  --color-light-transfert: #EFDFBB;
  --color-dark-transfert: #82502D;
  --color-light-life: #E3F4C9;
  --color-dark-life: #B5CB88;
}

/* § Les boutons */
.btn-validate {
  @apply bg-emerald-200 text-emerald-800 hover:bg-emerald-800 hover:text-emerald-200;
}

.btn-view {
  @apply bg-blue-200 text-blue-800 hover:bg-blue-800 hover:text-blue-200;
}

.btn-appli {
  @apply px-3 py-1 rounded-lg text-xs md:text-sm transition cursor-pointer;
}

.btn-pins {
  @apply p-1.5 rounded-full transition cursor-pointer;
}

.btn-flex {
  @apply flex items-center gap-2;
}

.btn-delete {
  @apply bg-red-200 text-red-800 hover:bg-red-800 hover:text-red-200;
}

.btn-zpb {
  @apply bg-zpb-blue text-zpb-yellow hover:bg-zpb-yellow hover:text-zpb-blue;
}

.btn-edit {
  @apply bg-amber-200 text-amber-800 hover:bg-amber-800 hover:text-amber-200;
}

.btn-return {
  @apply bg-gray-200 text-gray-800 hover:bg-gray-800 hover:text-gray-200;
}

.btn-death {
  @apply bg-dark-death text-light-death hover:bg-light-death hover:text-dark-death;
}

.btn-disappearance {
  @apply bg-dark-disappearance text-light-disappearance hover:bg-light-disappearance hover:text-dark-disappearance;
}

.btn-transfer {
  @apply bg-dark-transfert text-light-transfert hover:bg-light-transfert hover:text-dark-transfert;
}

.btn-closed {
  @apply text-white w-6 h-6 hover:bg-red-500;
}

/* § les éléments de formulaires */
.form-label {
  @apply text-sm block font-medium text-stone-700 dark:text-stone-300;
}

.form-input {
  @apply block text-sm rounded-sm text-anthracite dark:text-zpb-beige border ring-0 focus:ring-2 focus:ring-zpb-blue dark:focus:ring-zpb-blueLight bg-white dark:bg-zinc-600 px-2 py-1;
}

.form-file-input {
  @apply block text-sm rounded-sm text-anthracite dark:text-zpb-beige ring-0 focus:ring-2 focus:ring-zpb-blue dark:focus:ring-zpb-blueLight bg-white dark:bg-zinc-600;
}

.form-login {
  @apply block text-sm md:text-base border rounded-sm border-zinc-300 text-zinc-900 ring-0 focus:ring-0 bg-white pl-10 px-2 py-1 focus:ring-blue-500 focus:border-blue-500 w-full;
}

.form-select {
  @apply text-sm rounded-sm text-anthracite dark:text-zpb-beige border pl-2 pr-8 py-1 ring-0 focus:ring-2 focus:ring-zpb-blue dark:focus:ring-zpb-blueLight bg-white dark:bg-zinc-600;
}

.form-search-input {
  @apply block text-sm md:text-base rounded-sm text-anthracite dark:text-zpb-beige ring-0 focus:ring-2 focus:ring-zpb-blue dark:focus:ring-zpb-blueLight bg-white dark:bg-zinc-600 pr-2 pl-10 py-1;
}

.form-search input {
  @apply flex-auto text-sm md:text-base border rounded-s-sm text-anthracite dark:text-zpb-beige ring-0 focus:ring-2 focus:ring-zpb-blue dark:focus:ring-zpb-blueLight bg-white dark:bg-zinc-600 px-2 py-1;
}

.form-search button {
  @apply text-sm md:text-base border border-l-0 rounded-e-sm text-anthracite dark:text-zpb-beige ring-0 focus:ring-2 focus:ring-zpb-blue dark:focus:ring-zpb-blueLight bg-white dark:bg-zinc-600 px-2 py-1;
}

[type="checkbox"] {
  @apply appearance-auto;
}


/* § Scroll */
.custom-scrollbar {
  &::-webkit-scrollbar {
    width: 3px;
    height: 3px;
  }
  &::-webkit-scrollbar-thumb {
    @apply bg-zpb-blue
  }
}