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

@layer base {
  @font-face {
    font-family: "Manrope";
    src: local("Manrope"), url("assets/fonts/Manrope/Manrope-Variable.ttf");
  }
}

html,
.wmde-markdown {
  scrollbar-gutter: auto !important;
  font-family:
    Manrope,
    Open Sans;
}

#root {
  @apply center h-screen w-screen transitional bg-base-100 flex flex-row relative;
}

.center {
  @apply flex items-center justify-center;
}

.transitional {
  @apply transition-all duration-200 ease-in-out;
}

.modal:not(dialog:not(.modal-open)) {
  @apply filter backdrop-blur;
}

.resp-text {
  @apply text-sm md:text-base lg:text-base xl:text-2xl xxl:text-4xl;
}

.resp-title {
  @apply text-base xl:text-xl;
}

.resp-btn {
  @apply btn-xs md:btn-sm xxl:btn-md;
}

.resp-icon {
  @apply size-4 lg:size-6 xxl:size-7;
}

.Toastify__toast-theme--light,
.Toastify__toast-theme--dark {
  @apply bg-neutral text-neutral-content;
  /* border-radius: var(--rounded-box); */
}

.Toastify__progress-bar--error {
  @apply bg-error text-error-content;
}

.Toastify__progress-bar--success {
  @apply bg-success text-success-content;
}

.Toastify__progress-bar--warn {
  @apply bg-warning text-warning-content;
}

.Toastify__toast--success {
  @apply bg-success/50 text-success-content;
  svg,
  .Toastify__close-button > svg {
    @apply fill-success-content;
  }
}

.Toastify__toast--error {
  @apply bg-error/50 text-error-content;
  svg,
  .Toastify__close-button > svg {
    @apply fill-error-content;
  }
}

.Toastify__close-button > svg {
  @apply fill-neutral-content;
}

.wmde-markdown,
.wmde-markdown-var {
  li {
    @apply list-disc;
  }

  textarea {
    @apply !h-full !outline-none;
  }

  @apply !bg-base-100 !border-base-content/20;

  --color-fg-default: oklch(var(--bc)) !important;
  --color-fg-muted: oklch(var(--bc)) !important;
  --color-fg-subtle: oklch(var(--bc)) !important;
  --color-canvas-default: oklch(var(--b1)) !important;
  --color-canvas-subtle: oklch(var(--b1)) !important;
  --color-accent-fg: oklch(var(--bc)) !important;
  --color-accent-emphasis: oklch(var(--bc)) !important;
  --color-attention-subtle: oklch(var(--bc)) !important;
  --color-danger-fg: oklch(var(--er)) !important;
  --color-border-default: oklch(var(--bc)) !important;
  /* --color-border-muted: hsla(210, 18%, 87%, 1); */
  /* --color-neutral-muted: rgba(175, 184, 193, 0.2); */

  --color-prettylights-syntax-comment: oklch(var(--bc) / 0.6) !important;
  --color-prettylights-syntax-constant: oklch(var(--a)) !important;
  --color-prettylights-syntax-entity: oklch(var(--s)) !important;
  --color-prettylights-syntax-storage-modifier-import: oklch(
    var(--bc)
  ) !important;
  --color-prettylights-syntax-entity-tag: oklch(var(--s)) !important;
  --color-prettylights-syntax-keyword: oklch(var(--p)) !important;
  --color-prettylights-syntax-string: oklch(var(--su)) !important;
  --color-prettylights-syntax-variable: oklch(var(--er)) !important;
  --color-prettylights-syntax-brackethighlighter-unmatched: oklch(
    var(--bc)
  ) !important;
  --color-prettylights-syntax-invalid-illegal-text: oklch(var(--er)) !important;
  --color-prettylights-syntax-invalid-illegal-bg: oklch(var(--er)) !important;
  --color-prettylights-syntax-carriage-return-text: oklch(var(--bc)) !important;
  --color-prettylights-syntax-carriage-return-bg: oklch(var(--bc)) !important;
  --color-prettylights-syntax-string-regexp: oklch(var(--a)) !important;
  --color-prettylights-syntax-markup-list: oklch(var(--bc)) !important;
  --color-prettylights-syntax-markup-heading: oklch(var(--bc)) !important;
  --color-prettylights-syntax-markup-italic: oklch(var(--bc)) !important;
  --color-prettylights-syntax-markup-bold: oklch(var(--bc)) !important;
  --color-prettylights-syntax-markup-deleted-text: oklch(var(--er)) !important;
  --color-prettylights-syntax-markup-deleted-bg: oklch(var(--bc)) !important;
  --color-prettylights-syntax-markup-inserted-text: oklch(var(--bc)) !important;
  --color-prettylights-syntax-markup-inserted-bg: oklch(var(--bc)) !important;
  --color-prettylights-syntax-markup-changed-text: oklch(var(--bc)) !important;
  --color-prettylights-syntax-markup-changed-bg: oklch(var(--bc)) !important;
  --color-prettylights-syntax-markup-ignored-text: oklch(var(--bc)) !important;
  --color-prettylights-syntax-markup-ignored-bg: oklch(var(--bc)) !important;
  --color-prettylights-syntax-meta-diff-range: oklch(var(--bc)) !important;
  --color-prettylights-syntax-brackethighlighter-angle: oklch(
    var(--bc)
  ) !important;
  --color-prettylights-syntax-sublimelinter-gutter-mark: oklch(
    var(--bc)
  ) !important;
  --color-prettylights-syntax-constant-other-reference-link: oklch(
    var(--bc)
  ) !important;
}

.w-md-editor,
.w-md-editor-preview {
  @apply !bg-base-100 !shadow-none;
}

.w-md-editor-preview {
  @apply !px-0;
}

.w-md-editor-toolbar {
  @apply !bg-base-100 !border-base-content/20;
}

.wmde-markdown-color,
.w-md-editor-toolbar svg {
  @apply !text-base-content !bg-base-100 !border-base-content/20;
}

.wmde-markdown h1,
.wmde-markdown h2 {
  @apply !border-b-base-content/20;
}

.w-md-editor-text-input {
  @apply !text-base-content;
}
