@tailwind base;

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,300;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
  font-family: 'Work Sans', sans-serif;

  @apply bg-blue-50 #{!important};
}


@tailwind components;
@tailwind utilities;

@import 'ngx-toastr/toastr';

#toast-container {
  position: fixed;
  z-index: 999999;
  top: unset;
  left: 20px; /* Adjust the value as needed */
  bottom: 0; /* Adjust the value as needed */
  /*overrides*/
}

.ngx-toastr {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.bg-dots-darker {
  fill: #162E51 !important;
  background-image:url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(0,0,0,0.09)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  .dark\:bg-dots-lighter {
    background-image:url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E")
  }
}

#rendered-output {
  .highlight {
    @apply rounded px-[3px] py-0.5;

    &.blue {
      @apply bg-blue-300 text-blue-900 dark:bg-blue-900 dark:text-blue-100;
    }

    &.green {
      @apply bg-green-300 text-green-900 dark:bg-green-900 dark:text-green-100;
    }

    &.red {
      @apply bg-red-300 text-red-900 dark:bg-red-900 dark:text-red-100;
    }

    &.yellow {
      @apply bg-yellow-300 text-yellow-900 dark:bg-yellow-900 dark:text-yellow-100;
    }

    .descriptor {
      @apply ml-1 text-sm uppercase align-text-bottom opacity-80;
    }
  }
}