@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@100;200;300;400;500;600;700;800;900&display=swap');

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

@layer utilities {
    @variants responsive {
      /* Hide scrollbar for Chrome, Safari and Opera */
      .no-scrollbar::-webkit-scrollbar {
          display: none;
      }

      /* Hide scrollbar for IE, Edge and Firefox */
      .no-scrollbar {
          -ms-overflow-style: none;  /* IE and Edge */
          scrollbar-width: none;  /* Firefox */
      }
  }
}

@layer utilities {
  @variants responsive {
    /* Hide scrollbar for Chrome, Safari and Opera */
    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
    /* Hide scrollbar for IE, Edge and Firefox */
    .no-scrollbar {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
  }
}

@layer base {
  input[type='number']::-webkit-outer-spin-button,
  input[type='number']::-webkit-inner-spin-button,
  input[type='number'] {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield !important;
  }
}

body{
  font-family: "Tajawal" !important;
  @apply bg-primary overflow-y-scroll no-scrollbar;
}

body.dark{
  @apply bg-secondary-dark;
}

.panel {
  @apply relative rounded-[5px] bg-primary p-5 !border-[1px] !border-secondary-light shadow dark:bg-secondary-dark text-text dark:text-text-dark;
}

.ql-editor {
  height: 300px!important;
}

.ql-container {
  @apply rounded-bl-md rounded-br-md !border-2 !border-secondary-light
}

.ql-snow {
  @apply [&_*]:!stroke-text [&_*]:dark:!stroke-text-dark
}

.ql-toolbar {
  @apply rounded-tl-md rounded-tr-md !border-2 !border-secondary-light
}

.ql-picker-label {
  @apply [&_*]:!stroke-text [&_*]:dark:!stroke-text-dark
}

.ql-picker-options {
  @apply !bg-primary dark:!bg-primary-dark
}

.ql-picker-item {
  @apply !text-text dark:!text-text-dark
}

.apexcharts-toolbar {
  display: none !important;
}