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

/* NOSONAR: Tailwind CSS v4 directives - @config and @source are valid at-rules */
@config "../../tailwind.config.cjs";
/* NOSONAR */
@source "../../src/**/*.{ts,tsx,js,jsx}";
/* NOSONAR */

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {

  #fbjs *,
  #fbjs ::after,
  #fbjs ::before,
  #fbjs ::backdrop,
  #fbjs ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}


/* Chrome, Edge, and Safari */
#fbjs *::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}

#fbjs *::-webkit-scrollbar-track {
  background: transparent;
}

#fbjs *::-webkit-scrollbar-thumb {
  background-color: var(--fb-brand-color);
  border: none;
  border-radius: 10px;
}

/* Firefox */
#fbjs * {
  scrollbar-width: thin;
  scrollbar-color: var(--fb-brand-color) transparent;
}

/* this is for styling the HtmlBody component */
#fbjs .htmlbody {
  @apply block text-sm font-normal leading-6;
  /* need to use !important because in packages/survey-ui/components/editor/styles-editor-frontend.css the color is defined for some classes */
  color: var(--fb-subheading-color) !important;
}

/*
 * Restore list styling for rich text (questions/descriptions).
 * Preflight resets ul/ol with list-style:none; these overrides restore bullets/numbers.
 */
#fbjs .htmlbody ul,
#fbjs .htmlbody ol,
#fbjs [data-variant="headline"] ul,
#fbjs [data-variant="headline"] ol,
#fbjs [data-variant="description"] ul,
#fbjs [data-variant="description"] ol {
  list-style-position: outside;
  margin: 0.5em 0;
  padding-left: 1.5em;
}
#fbjs .htmlbody ul,
#fbjs [data-variant="headline"] ul,
#fbjs [data-variant="description"] ul {
  list-style-type: disc;
}
#fbjs .htmlbody ol,
#fbjs [data-variant="headline"] ol,
#fbjs [data-variant="description"] ol {
  list-style-type: decimal;
}
#fbjs .htmlbody li,
#fbjs [data-variant="headline"] li,
#fbjs [data-variant="description"] li {
  margin: 0.25em 0;
}

/* without this, it wont override the color */
#fbjs p.editor-paragraph {
  overflow-wrap: break-word;
}

/* theming */
#fbjs {
  font-size: 16px;
  --brand-default: #64748b;
  --slate-50: rgb(248, 250, 252);
  --slate-100: rgb(241 245 249);
  --slate-200: rgb(226 232 240);
  --slate-300: rgb(203, 213, 225);
  --slate-400: rgb(148 163 184);
  --slate-500: rgb(100 116 139);
  --slate-600: rgb(71 85 105);
  --slate-700: rgb(51 65 85);
  --slate-800: rgb(30 41 59);
  --slate-900: rgb(15 23 42);
  --gray-100: rgb(243 244 246);
  --gray-200: rgb(229 231 235);
  --yellow-100: rgb(254 249 195);
  --yellow-300: rgb(253 224 71);
  --yellow-500: rgb(234 179 8);

  /* Default Light Theme, you can override everything by changing these values */
  --fb-brand-color: var(--brand-default);
  --fb-brand-text-color: black;
  --fb-border-color: var(--slate-300);
  --fb-border-color-highlight: var(--slate-500);
  --fb-focus-color: var(--slate-500);
  --fb-heading-color: var(--slate-900);
  --fb-subheading-color: var(--slate-700);
  --fb-placeholder-color: var(--slate-300);
  --fb-info-text-color: var(--slate-500);
  --fb-signature-text-color: var(--slate-500);
  --fb-branding-text-color: var(--slate-500);
  --fb-survey-background-color: white;
  --fb-survey-border-color: var(--slate-50);
  --fb-accent-background-color: var(--slate-200);
  --fb-accent-background-color-selected: var(--slate-100);
  --fb-input-background-color: var(--slate-50);
  --fb-input-background-color-selected: var(--slate-200);
  --fb-placeholder-color: var(--slate-400);
  --fb-rating-fill: var(--yellow-100);
  --fb-rating-hover: var(--yellow-500);
  --fb-back-btn-border: transparent;
  --fb-submit-btn-border: transparent;
  --fb-rating-selected: black;
  --fb-close-btn-color: var(--slate-500);
  --fb-close-btn-color-hover: var(--slate-700);
  --fb-calendar-tile-color: var(--slate-50);
  --fb-border-radius: 8px;
}

@keyframes shrink-width-to-zero {
  from {
    width: 100%;
  }

  to {
    width: 0%;
  }
}

#fbjs .no-scrollbar {
  -ms-overflow-style: none !important;
  /* Internet Explorer 10+ */
  scrollbar-width: thin !important;
  /* Firefox */
  scrollbar-color: transparent transparent !important;
  /* Firefox */

  /* Chrome, Edge, and Safari */
  &::-webkit-scrollbar {
    width: 0 !important;
    background: transparent !important;
  }

  &::-webkit-scrollbar-thumb {
    background: transparent !important;
  }
}

#fbjs .grecaptcha-badge {
  visibility: hidden;
}