/**
 * START --- TAILWIND GENERATOR EDIT
 *
 * `yarn rw generate util tailwind` placed these imports here
 * to inject Tailwind's styles into your CSS.
 * For more information, see: https://tailwindcss.com/docs/installation#add-tailwind-to-your-css
 */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/**
 * END --- TAILWIND GENERATOR EDIT
 */

@layer base {
  body {
    font-family: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }

  /* https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ */
  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

@layer components {
  .tabToggle {
    @apply text-ch-gray-300 p-3 mb-1 flex justify-center;
  }
  .tabToggle.active {
    @apply bg-ch-pink-800 text-ch-pink-300 bg-opacity-30;
  }
  .tabToggle.disabled {
    @apply text-ch-gray-550 cursor-not-allowed;
  }
}

.three-debug-panel-1 {
  position: fixed;
  padding-top: 300px;
}
.three-debug-panel-2 {
  position: fixed;
  padding-top: 300px;
  padding-left: 100px;
}

.markdown-overrides h4 {
  @apply text-lg font-bold;
}
.markdown-overrides {
  @apply bg-transparent;
}
.markdown-overrides div {
  @apply text-ch-gray-300 bg-transparent;
}
.markdown-overrides div a {
  @apply text-ch-pink-500 underline bg-transparent;
}

.markdown-overrides div h3 {
  @apply text-xl;
}
.markdown-overrides div h2 {
  @apply text-2xl;
}
.markdown-overrides div h1 {
  @apply text-3xl;
}
.markdown-overrides ol {
  @apply list-decimal;
}
.markdown-overrides ul {
  @apply list-disc;
}

#cadhub-ide.mosaic-toolbar-overrides .mosaic-blueprint-theme {
  background-color: #0D0D13;
}
#cadhub-ide.mosaic-toolbar-overrides .mosaic-root {
  top: 0;
}
.mosaic-toolbar-overrides .mosaic-window .mosaic-window-toolbar {
  /* makes the height of the toolbar based off the content inside instead of hardcoded to 30px */
  height: unset;
}
/* used in IdeContainer component */
#cadhub-ide .mosaic-window.console .mosaic-window-body {
  overflow-y: auto;
}


/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
.svg-shadow {
  filter: drop-shadow(0 15px 10px #00000036) drop-shadow(0 4px 6px #00000036);
}

/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
.landing-bg-clip-path {
  clip-path: polygon(0 0, 100% 62%, 100% 100%, 0% 100%);
}

/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
@media only screen and (max-width: 1600px) {
  .landing-bg-clip-path {
    clip-path: polygon(0 10%, 100% 55%, 100% 100%, 0% 100%);
  }
}
/* Used for LandingSection.js, if it's gone or these class isn't used there you can probably delete it */
@media only screen and (max-width: 800px) {
  .landing-bg-clip-path {
    clip-path: polygon(0 12%, 100% 70%, 100% 100%, 0% 100%);
  }
}

.material-ui-overrides,.MuiPopover-paper {
  /* stop pop over from scrolling */
  overflow: visible !important;
}
html {
  scroll-behavior: smooth;
}
body {
  /* TODO can I use a tailwind class here? */
  background-color: #f7fafc;
}

button, input, label, textarea {
  display: block;
  outline: none;
}

label {
  margin-top: 1rem;
}

.error {
  color: red;
}

input.error, textarea.error {
  border: 1px solid red;
}