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

/* @import "./survey.css"; */

#fbjs {
  font-size: 16px;
}

/* 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 */
.fb-htmlbody {
  @apply fb-block fb-text-sm fb-font-normal fb-leading-6;
  /* need to use !important because in packages/ui/components/editor/styles-editor-frontend.css the color is defined for some classes */
  color: var(--fb-subheading-color) !important;
}

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

.fb-survey-shadow {
  box-shadow: 0px 0px 90px -40px var(--fb-survey-shadow-color);
}

/* theming */
:root {
  --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-survey-shadow-color: rgba(0, 0, 0, 0.4);
  --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-shadow-color: var(--slate-300);
  --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%;
  }
}

.fb-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;
  }
}

.grecaptcha-badge {
  visibility: hidden;
}
