@xplor-education/core-stencil-components 3.1.2 → 3.1.3

package/dist/collection/components/xplor-rich-text-editor/xplor-rich-text-editor.css

@@ -0,0 +1,1445 @@
+/* on mobile browsers, I set a width of 100% */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  /* html[data-theme='office'] {
+    --color-primary: rgb(219, 59, 3);
+    --color-secondary: rgb(0, 119, 107);
+    --color-buttons: #89da59;
+    --color-typography: #ff320e;
+  }
+
+  html {
+    --color-primary: #db3b03;
+    --color-primary-50: #db3b03;
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgb(0, 119, 107);
+    --color-tertiary: rgb(128, 104, 186);
+  } */
+  :root {
+    --color-primary: #db3b03;
+    --color-primary-50: rgba(255, 152, 0, 1);
+    --color-secondary: rgb(0, 119, 107);
+    --color-secondary-50: rgba(1, 163, 157, 1);
+    --color-tertiary: rgb(128, 104, 186);
+    --color-tertiary: rgb(223, 242, 241);
+    --color-white: white;
+    --color-emphasis: rgb(8, 8, 9);
+    --color-supergiant: rgb(213, 66, 99);
+    --color-orange: rgb(250, 200, 127);
+    --color-buttons: #fbbc05;
+    --color-typography: #ea4335;
+    --background: 20 66% 99%;
+    --foreground: 20 51% 4%;
+    --muted: 20 25% 86%;
+    --muted-foreground: 20 7% 25%;
+    --popover: 20 66% 98%;
+    --popover-foreground: 20 51% 3%;
+    --card: 20 66% 98%;
+    --card-foreground: 20 51% 3%;
+    --border: 20 15% 94%;
+    --input: 20 15% 94%;
+    --primary: 20 48% 72%;
+    --primary-foreground: 20 48% 12%;
+    --secondary: 20 12% 92%;
+    --secondary-foreground: 20 12% 32%;
+    --accent: 20 12% 92%;
+    --accent-foreground: 20 12% 32%;
+    --destructive: 11 80% 22%;
+    --destructive-foreground: 11 80% 82%;
+    --ring: 20 48% 72%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+  .dark {
+    --background: 253 43% 3%;
+    --foreground: 253 31% 98%;
+    --muted: 253 7% 13%;
+    --muted-foreground: 253 13% 63%;
+    --popover: 253 43% 3%;
+    --popover-foreground: 253 31% 98%;
+    --card: 253 43% 4%;
+    --card-foreground: 253 31% 99%;
+    --border: 215 27.9% 16.9%;
+    --input: 215 27.9% 16.9%;
+    --primary: 253 91% 58%;
+    --primary-foreground: 253 91% 98%;
+    --secondary: 253 7% 9%;
+    --secondary-foreground: 253 7% 69%;
+    --accent: 253 13% 14%;
+    --accent-foreground: 253 13% 74%;
+    --destructive: 339.2 90.36% 51.18%;
+    --destructive-foreground: 0 0% 100%;
+    --ring: 253 91% 58%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply box-border bg-background text-foreground;
+  }
+}
+@layer utilities {
+  .min-h-screen {
+    min-height: 100vh;
+    /* Fallback */
+    min-height: 100dvh;
+  }
+  .h-screen {
+    height: 100vh;
+    /* Fallback */
+    height: 100dvh;
+  }
+}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer components {
+  .glass {
+    border: none;
+    backdrop-filter: blur(var(--glass-blur, 40px));
+    background-color: transparent;
+    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);
+    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);
+    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));
+  }
+}
+.tox.tox-tinymce {
+  width: 50% !important;
+  height: 400px !important;
+  display: inline-flex;
+}
+
+/* on large screens, I use a different layout, so 600px are sufficient */
+@media only screen and (min-width: 600px) {
+  .tox.tox-tinymce {
+    width: 600px !important;
+  }
+}
+h1 {
+  color: var(--color-primary);
+  /* Header/H1 */
+  font-family: Inter;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 56px; /* 116.667% */
+}
+
+h2 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H2 Bold */
+  font-family: Inter;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 38px; /* 118.75% */
+  letter-spacing: 0.25px;
+}
+
+h3 {
+  color: var(--grey-1100252525, #252525);
+  /* Header/H3 */
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px; /* 133.333% */
+}
+
+.overline {
+  color: var(--grey-1100252525, #252525);
+  /* Overline/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 3.2px;
+  text-transform: uppercase;
+}
+
+ol,
+ul {
+  list-style: none;
+  margin: 1rem;
+  padding: 0;
+}
+ol li,
+ul li {
+  margin: 1rem;
+  padding: 0;
+}
+ol.mdc-list,
+ul.mdc-list {
+  list-style-type: none;
+  list-style: none;
+}
+ol.mdc-list li.mdc-list-item,
+ul.mdc-list li.mdc-list-item {
+  list-style-type: none;
+  list-style: none !important;
+}
+
+.orange-label {
+  color: var(--Orange-900-Primary, #db3b03);
+  /* Caption 1/Regular */
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px; /* 133.333% */
+  letter-spacing: 0.4px;
+  margin: 0px 0 -9px 16px;
+  z-index: 1 !important;
+  position: relative;
+  width: fit-content;
+}
+.orange-label.grey-bg {
+  background-color: #fefcfb;
+}
+
+#spinnerLoader {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+  pointer-events: none;
+}
+
+#textfield-Title-label {
+  background-color: white;
+}
+
+.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 1px solid #db3b03 !important;
+  padding: 0;
+  height: 0;
+}
+
+.mdc-text-field--focused .mdc-notched-outline__notch {
+  border: 0px solid transparent !important;
+  border-bottom: 2px solid #db3b03 !important;
+}
+
+.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {
+  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);
+  border-top: transparent;
+}
+
+.generate-btn {
+  display: flex;
+  height: 48px;
+  padding: 12px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 16px;
+}
+.generate-btn.link:hover {
+  background-color: var(--Cyan-700-Secondary, #e27046);
+  color: var(--Cyan-700-Secondary-Text, #fff);
+}
+
+.bg-green {
+  background: var(--Cyan-700-Secondary, #00776b);
+}
+
+.margin-128 {
+  margin: 8rem;
+}
+
+.margin-t-128 {
+  margin-top: 8rem;
+}
+
+.margin-r-128 {
+  margin-right: 8rem;
+}
+
+.margin-b-128 {
+  margin-bottom: 8rem;
+}
+
+.margin-l-128 {
+  margin-left: 8rem;
+}
+
+.margin-x-128 {
+  margin-left: 8rem;
+  margin-right: 8rem;
+}
+
+.margin-y-128 {
+  margin-top: 8rem;
+  margin-bottom: 8rem;
+}
+
+.margin-80 {
+  margin: 5rem;
+}
+
+.margin-t-80 {
+  margin-top: 5rem;
+}
+
+.margin-r-80 {
+  margin-right: 5rem;
+}
+
+.margin-b-80 {
+  margin-bottom: 5rem;
+}
+
+.margin-l-80 {
+  margin-left: 5rem;
+}
+
+.margin-x-80 {
+  margin-left: 5rem;
+  margin-right: 5rem;
+}
+
+.margin-y-80 {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+}
+
+.margin-64 {
+  margin: 4rem;
+}
+
+.margin-t-64 {
+  margin-top: 4rem;
+}
+
+.margin-r-64 {
+  margin-right: 4rem;
+}
+
+.margin-b-64 {
+  margin-bottom: 4rem;
+}
+
+.margin-l-64 {
+  margin-left: 4rem;
+}
+
+.margin-x-64 {
+  margin-left: 4rem;
+  margin-right: 4rem;
+}
+
+.margin-y-64 {
+  margin-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+.margin-56 {
+  margin: 3.5rem;
+}
+
+.margin-t-56 {
+  margin-top: 3.5rem;
+}
+
+.margin-r-56 {
+  margin-right: 3.5rem;
+}
+
+.margin-b-56 {
+  margin-bottom: 3.5rem;
+}
+
+.margin-l-56 {
+  margin-left: 3.5rem;
+}
+
+.margin-x-56 {
+  margin-left: 3.5rem;
+  margin-right: 3.5rem;
+}
+
+.margin-y-56 {
+  margin-top: 3.5rem;
+  margin-bottom: 3.5rem;
+}
+
+.margin-48 {
+  margin: 3rem;
+}
+
+.margin-t-48 {
+  margin-top: 3rem;
+}
+
+.margin-r-48 {
+  margin-right: 3rem;
+}
+
+.margin-b-48 {
+  margin-bottom: 3rem;
+}
+
+.margin-l-48 {
+  margin-left: 3rem;
+}
+
+.margin-x-48 {
+  margin-left: 3rem;
+  margin-right: 3rem;
+}
+
+.margin-y-48 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
+.margin-40 {
+  margin: 2.5rem;
+}
+
+.margin-t-40 {
+  margin-top: 2.5rem;
+}
+
+.margin-r-40 {
+  margin-right: 2.5rem;
+}
+
+.margin-b-40 {
+  margin-bottom: 2.5rem;
+}
+
+.margin-l-40 {
+  margin-left: 2.5rem;
+}
+
+.margin-x-40 {
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+}
+
+.margin-y-40 {
+  margin-top: 2.5rem;
+  margin-bottom: 2.5rem;
+}
+
+.margin-32 {
+  margin: 2rem;
+}
+
+.margin-t-32 {
+  margin-top: 2rem;
+}
+
+.margin-r-32 {
+  margin-right: 2rem;
+}
+
+.margin-b-32 {
+  margin-bottom: 2rem;
+}
+
+.margin-l-32 {
+  margin-left: 2rem;
+}
+
+.margin-x-32 {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+.margin-y-32 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.margin-24 {
+  margin: 1.5rem;
+}
+
+.margin-t-24 {
+  margin-top: 1.5rem;
+}
+
+.margin-r-24 {
+  margin-right: 1.5rem;
+}
+
+.margin-b-24 {
+  margin-bottom: 1.5rem;
+}
+
+.margin-l-24 {
+  margin-left: 1.5rem;
+}
+
+.margin-x-24 {
+  margin-left: 1.5rem;
+  margin-right: 1.5rem;
+}
+
+.margin-y-24 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.margin-20 {
+  margin: 1.25rem;
+}
+
+.margin-t-20 {
+  margin-top: 1.25rem;
+}
+
+.margin-r-20 {
+  margin-right: 1.25rem;
+}
+
+.margin-b-20 {
+  margin-bottom: 1.25rem;
+}
+
+.margin-l-20 {
+  margin-left: 1.25rem;
+}
+
+.margin-x-20 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+
+.margin-y-20 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.margin-16 {
+  margin: 1rem;
+}
+
+.margin-t-16 {
+  margin-top: 1rem;
+}
+
+.margin-r-16 {
+  margin-right: 1rem;
+}
+
+.margin-b-16 {
+  margin-bottom: 1rem;
+}
+
+.margin-l-16 {
+  margin-left: 1rem;
+}
+
+.margin-x-16 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.margin-y-16 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.margin-12 {
+  margin: 0.75rem;
+}
+
+.margin-t-12 {
+  margin-top: 0.75rem;
+}
+
+.margin-r-12 {
+  margin-right: 0.75rem;
+}
+
+.margin-b-12 {
+  margin-bottom: 0.75rem;
+}
+
+.margin-l-12 {
+  margin-left: 0.75rem;
+}
+
+.margin-x-12 {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+
+.margin-y-12 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.margin-8 {
+  margin: 0.5rem;
+}
+
+.margin-t-8 {
+  margin-top: 0.5rem;
+}
+
+.margin-r-8 {
+  margin-right: 0.5rem;
+}
+
+.margin-b-8 {
+  margin-bottom: 0.5rem;
+}
+
+.margin-l-8 {
+  margin-left: 0.5rem;
+}
+
+.margin-x-8 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.margin-y-8 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.margin-4 {
+  margin: 0.25rem;
+}
+
+.margin-t-4 {
+  margin-top: 0.25rem;
+}
+
+.margin-r-4 {
+  margin-right: 0.25rem;
+}
+
+.margin-b-4 {
+  margin-bottom: 0.25rem;
+}
+
+.margin-l-4 {
+  margin-left: 0.25rem;
+}
+
+.margin-x-4 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+.margin-y-4 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+}
+
+.padding-128 {
+  padding: 8rem;
+}
+
+.padding-t-128 {
+  padding-top: 8rem;
+}
+
+.padding-r-128 {
+  padding-right: 8rem;
+}
+
+.padding-b-128 {
+  padding-bottom: 8rem;
+}
+
+.padding-l-128 {
+  padding-left: 8rem;
+}
+
+.padding-x-128 {
+  padding-left: 8rem;
+  padding-right: 8rem;
+}
+
+.padding-y-128 {
+  padding-top: 8rem;
+  padding-bottom: 8rem;
+}
+
+.padding-80 {
+  padding: 5rem;
+}
+
+.padding-t-80 {
+  padding-top: 5rem;
+}
+
+.padding-r-80 {
+  padding-right: 5rem;
+}
+
+.padding-b-80 {
+  padding-bottom: 5rem;
+}
+
+.padding-l-80 {
+  padding-left: 5rem;
+}
+
+.padding-x-80 {
+  padding-left: 5rem;
+  padding-right: 5rem;
+}
+
+.padding-y-80 {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+}
+
+.padding-64 {
+  padding: 4rem;
+}
+
+.padding-t-64 {
+  padding-top: 4rem;
+}
+
+.padding-r-64 {
+  padding-right: 4rem;
+}
+
+.padding-b-64 {
+  padding-bottom: 4rem;
+}
+
+.padding-l-64 {
+  padding-left: 4rem;
+}
+
+.padding-x-64 {
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+
+.padding-y-64 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.padding-56 {
+  padding: 3.5rem;
+}
+
+.padding-t-56 {
+  padding-top: 3.5rem;
+}
+
+.padding-r-56 {
+  padding-right: 3.5rem;
+}
+
+.padding-b-56 {
+  padding-bottom: 3.5rem;
+}
+
+.padding-l-56 {
+  padding-left: 3.5rem;
+}
+
+.padding-x-56 {
+  padding-left: 3.5rem;
+  padding-right: 3.5rem;
+}
+
+.padding-y-56 {
+  padding-top: 3.5rem;
+  padding-bottom: 3.5rem;
+}
+
+.padding-48 {
+  padding: 3rem;
+}
+
+.padding-t-48 {
+  padding-top: 3rem;
+}
+
+.padding-r-48 {
+  padding-right: 3rem;
+}
+
+.padding-b-48 {
+  padding-bottom: 3rem;
+}
+
+.padding-l-48 {
+  padding-left: 3rem;
+}
+
+.padding-x-48 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.padding-y-48 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.padding-40 {
+  padding: 2.5rem;
+}
+
+.padding-t-40 {
+  padding-top: 2.5rem;
+}
+
+.padding-r-40 {
+  padding-right: 2.5rem;
+}
+
+.padding-b-40 {
+  padding-bottom: 2.5rem;
+}
+
+.padding-l-40 {
+  padding-left: 2.5rem;
+}
+
+.padding-x-40 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
+
+.padding-y-40 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.padding-32 {
+  padding: 2rem;
+}
+
+.padding-t-32 {
+  padding-top: 2rem;
+}
+
+.padding-r-32 {
+  padding-right: 2rem;
+}
+
+.padding-b-32 {
+  padding-bottom: 2rem;
+}
+
+.padding-l-32 {
+  padding-left: 2rem;
+}
+
+.padding-x-32 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
+.padding-y-32 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.padding-24 {
+  padding: 1.5rem;
+}
+
+.padding-t-24 {
+  padding-top: 1.5rem;
+}
+
+.padding-r-24 {
+  padding-right: 1.5rem;
+}
+
+.padding-b-24 {
+  padding-bottom: 1.5rem;
+}
+
+.padding-l-24 {
+  padding-left: 1.5rem;
+}
+
+.padding-x-24 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.padding-y-24 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.padding-20 {
+  padding: 1.25rem;
+}
+
+.padding-t-20 {
+  padding-top: 1.25rem;
+}
+
+.padding-r-20 {
+  padding-right: 1.25rem;
+}
+
+.padding-b-20 {
+  padding-bottom: 1.25rem;
+}
+
+.padding-l-20 {
+  padding-left: 1.25rem;
+}
+
+.padding-x-20 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
+.padding-y-20 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.padding-16 {
+  padding: 1rem;
+}
+
+.padding-t-16 {
+  padding-top: 1rem;
+}
+
+.padding-r-16 {
+  padding-right: 1rem;
+}
+
+.padding-b-16 {
+  padding-bottom: 1rem;
+}
+
+.padding-l-16 {
+  padding-left: 1rem;
+}
+
+.padding-x-16 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.padding-y-16 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
+.padding-12 {
+  padding: 0.75rem;
+}
+
+.padding-t-12 {
+  padding-top: 0.75rem;
+}
+
+.padding-r-12 {
+  padding-right: 0.75rem;
+}
+
+.padding-b-12 {
+  padding-bottom: 0.75rem;
+}
+
+.padding-l-12 {
+  padding-left: 0.75rem;
+}
+
+.padding-x-12 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.padding-y-12 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
+
+.padding-8 {
+  padding: 0.5rem;
+}
+
+.padding-t-8 {
+  padding-top: 0.5rem;
+}
+
+.padding-r-8 {
+  padding-right: 0.5rem;
+}
+
+.padding-b-8 {
+  padding-bottom: 0.5rem;
+}
+
+.padding-l-8 {
+  padding-left: 0.5rem;
+}
+
+.padding-x-8 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.padding-y-8 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.padding-4 {
+  padding: 0.25rem;
+}
+
+.padding-t-4 {
+  padding-top: 0.25rem;
+}
+
+.padding-r-4 {
+  padding-right: 0.25rem;
+}
+
+.padding-b-4 {
+  padding-bottom: 0.25rem;
+}
+
+.padding-l-4 {
+  padding-left: 0.25rem;
+}
+
+.padding-x-4 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
+.padding-y-4 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+:host {
+  display: block;
+  --rte-border-color: var(--color-gray-300, #e0e0e0);
+  --rte-border-radius: 0.75rem;
+  --rte-border-width: 1px;
+  --rte-bg: var(--color-surface, #ffffff);
+  --rte-toolbar-bg: var(--color-gray-50, #fafafa);
+  --rte-toolbar-border: var(--color-gray-200, #eeeeee);
+  --rte-focus-color: var(--color-primary, var(--color-primary-500, #2196f3));
+  --rte-error-color: var(--color-error, var(--color-error-600, #e53935));
+  --rte-text-color: var(--color-on-surface, #212121);
+  --rte-placeholder-color: var(--color-gray-400, #bdbdbd);
+  --rte-min-height: 12rem;
+  --rte-content-padding: 0.75rem 1rem;
+  --rte-font-size: 1rem;
+  --rte-line-height: 1.6;
+  --rte-btn-size: 2rem;
+  --rte-btn-color: var(--color-gray-600, #757575);
+  --rte-btn-active-bg: var(--color-primary-50, var(--color-primary-50, #e3f2fd));
+  --rte-btn-active-color: var(--color-primary, var(--color-primary-500, #2196f3));
+  --rte-btn-hover-bg: var(--color-gray-100, #f5f5f5);
+}
+
+.xplor-rte__label {
+  display: block;
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--rte-text-color);
+}
+
+.xplor-rte__required {
+  color: var(--rte-error-color);
+}
+
+.xplor-rte {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border: var(--rte-border-width) solid var(--rte-border-color);
+  border-radius: var(--rte-border-radius);
+  background-color: var(--rte-bg);
+  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+.xplor-rte--focused {
+  border-color: var(--rte-focus-color);
+  border-width: 2px;
+  box-shadow: 0 0 0 3px rgba(0, 132, 128, 0.12);
+}
+.xplor-rte--error {
+  border-color: var(--rte-error-color);
+}
+.xplor-rte--error.xplor-rte--focused {
+  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12);
+}
+.xplor-rte--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+  user-select: none;
+  background-color: var(--color-gray-50, #fafafa);
+}
+.xplor-rte--readonly {
+  background-color: var(--color-gray-50, #fafafa);
+  cursor: default;
+}
+
+.xplor-rte__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  background-color: var(--rte-toolbar-bg);
+  border-bottom: 1px solid var(--rte-toolbar-border);
+}
+.xplor-rte--readonly .xplor-rte__toolbar, .xplor-rte--disabled .xplor-rte__toolbar {
+  display: none;
+}
+
+.xplor-rte__toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.xplor-rte__toolbar-divider {
+  width: 1px;
+  height: 1.25rem;
+  background-color: var(--rte-toolbar-border);
+  flex-shrink: 0;
+  margin: 0 0.25rem;
+}
+
+.xplor-rte__toolbar-btn {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  outline: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rte-btn-size);
+  height: var(--rte-btn-size);
+  border-radius: 0.375rem;
+  color: var(--rte-btn-color);
+  background-color: transparent;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color 0.1s ease, color 0.1s ease;
+}
+.xplor-rte__toolbar-btn:focus-visible {
+  outline: 2px solid var(--rte-focus-color);
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+.xplor-rte__toolbar-btn:hover:not(:disabled) {
+  background-color: var(--rte-btn-hover-bg);
+  color: var(--rte-text-color);
+}
+.xplor-rte__toolbar-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.xplor-rte__toolbar-btn--active {
+  background-color: var(--rte-btn-active-bg);
+  color: var(--rte-btn-active-color);
+  font-weight: 600;
+}
+.xplor-rte__toolbar-btn .xplor-rte__toolbar-text {
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.xplor-rte__link-wrapper {
+  position: relative;
+}
+
+.xplor-rte__link-popover {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  left: 0;
+  z-index: 10;
+  background-color: var(--rte-bg);
+  border: 1px solid var(--rte-border-color);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 18rem;
+}
+
+.xplor-rte__link-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.xplor-rte__link-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--rte-text-color);
+}
+
+.xplor-rte__link-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  color: var(--rte-text-color);
+  background-color: var(--rte-bg);
+  border: 1px solid var(--rte-border-color);
+  border-radius: 0.5rem;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.15s ease;
+}
+.xplor-rte__link-input:focus {
+  border-color: var(--rte-focus-color);
+  box-shadow: 0 0 0 2px rgba(0, 132, 128, 0.12);
+}
+.xplor-rte__link-input::placeholder {
+  color: var(--rte-placeholder-color);
+}
+
+.xplor-rte__link-actions {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+}
+
+.xplor-rte__link-apply,
+.xplor-rte__link-cancel {
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  outline: inherit;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: background-color 0.1s ease;
+}
+.xplor-rte__link-apply:focus-visible,
+.xplor-rte__link-cancel:focus-visible {
+  outline: 2px solid var(--rte-focus-color);
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
+.xplor-rte__link-apply {
+  background-color: var(--rte-focus-color);
+  color: #ffffff;
+}
+.xplor-rte__link-apply:hover {
+  background-color: var(--color-primary-600, var(--color-primary-600, #1e88e5));
+}
+
+.xplor-rte__link-cancel {
+  background-color: transparent;
+  color: var(--rte-btn-color);
+}
+.xplor-rte__link-cancel:hover {
+  background-color: var(--rte-btn-hover-bg);
+}
+
+.xplor-rte__content {
+  flex: 1;
+  min-height: var(--rte-min-height);
+  padding: var(--rte-content-padding);
+  font-size: var(--rte-font-size);
+  line-height: var(--rte-line-height);
+  color: var(--rte-text-color);
+  box-sizing: border-box;
+  cursor: text;
+}
+.xplor-rte__content :global(.ProseMirror) {
+  min-height: calc(var(--rte-min-height) - 3rem);
+  outline: none;
+}
+.xplor-rte__content :global(.ProseMirror) p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: var(--rte-placeholder-color);
+  pointer-events: none;
+  float: left;
+  height: 0;
+}
+.xplor-rte__content :global(.ProseMirror) p {
+  margin: 0 0 0.75em;
+}
+.xplor-rte__content :global(.ProseMirror) p:last-child {
+  margin-bottom: 0;
+}
+.xplor-rte__content :global(.ProseMirror) h1,
+.xplor-rte__content :global(.ProseMirror) h2,
+.xplor-rte__content :global(.ProseMirror) h3,
+.xplor-rte__content :global(.ProseMirror) h4,
+.xplor-rte__content :global(.ProseMirror) h5,
+.xplor-rte__content :global(.ProseMirror) h6 {
+  font-weight: 700;
+  line-height: 1.3;
+  margin: 1em 0 0.5em;
+}
+.xplor-rte__content :global(.ProseMirror) h1:first-child,
+.xplor-rte__content :global(.ProseMirror) h2:first-child,
+.xplor-rte__content :global(.ProseMirror) h3:first-child,
+.xplor-rte__content :global(.ProseMirror) h4:first-child,
+.xplor-rte__content :global(.ProseMirror) h5:first-child,
+.xplor-rte__content :global(.ProseMirror) h6:first-child {
+  margin-top: 0;
+}
+.xplor-rte__content :global(.ProseMirror) h1 {
+  font-size: 2em;
+}
+.xplor-rte__content :global(.ProseMirror) h2 {
+  font-size: 1.5em;
+}
+.xplor-rte__content :global(.ProseMirror) h3 {
+  font-size: 1.25em;
+}
+.xplor-rte__content :global(.ProseMirror) h4 {
+  font-size: 1.1em;
+}
+.xplor-rte__content :global(.ProseMirror) h5 {
+  font-size: 1em;
+}
+.xplor-rte__content :global(.ProseMirror) h6 {
+  font-size: 0.875em;
+}
+.xplor-rte__content :global(.ProseMirror) ul,
+.xplor-rte__content :global(.ProseMirror) ol {
+  padding-left: 1.5em;
+  margin: 0.5em 0;
+}
+.xplor-rte__content :global(.ProseMirror) li {
+  margin-bottom: 0.25em;
+}
+.xplor-rte__content :global(.ProseMirror) blockquote {
+  border-left: 3px solid var(--rte-focus-color);
+  margin: 0.75em 0;
+  padding: 0.5em 0 0.5em 1em;
+  color: var(--color-gray-600, #757575);
+  font-style: italic;
+}
+.xplor-rte__content :global(.ProseMirror) code {
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 0.875em;
+  background-color: var(--color-gray-100, #f5f5f5);
+  border-radius: 0.25em;
+  padding: 0.1em 0.35em;
+  color: var(--color-error, var(--color-error-700, #d32f2f));
+}
+.xplor-rte__content :global(.ProseMirror) pre {
+  background-color: var(--color-gray-900, #212121);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 0.75em 0;
+  overflow-x: auto;
+}
+.xplor-rte__content :global(.ProseMirror) pre code {
+  background: none;
+  padding: 0;
+  font-size: 0.875em;
+  color: var(--color-gray-100, #f5f5f5);
+}
+.xplor-rte__content :global(.ProseMirror) a {
+  color: var(--rte-focus-color);
+  text-decoration: underline;
+  cursor: pointer;
+}
+.xplor-rte__content :global(.ProseMirror) a:hover {
+  color: var(--color-primary-700, var(--color-primary-700, #1976d2));
+}
+.xplor-rte__content :global(.ProseMirror) strong {
+  font-weight: 700;
+}
+.xplor-rte__content :global(.ProseMirror) em {
+  font-style: italic;
+}
+.xplor-rte__content :global(.ProseMirror) u {
+  text-decoration: underline;
+}
+.xplor-rte__content :global(.ProseMirror) s {
+  text-decoration: line-through;
+}
+.xplor-rte__content :global(.ProseMirror) :global(.ProseMirror-selectednode) {
+  outline: 2px solid var(--rte-focus-color);
+}
+
+.xplor-rte__char-count {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--color-gray-500, #9e9e9e);
+  text-align: right;
+  border-top: 1px solid var(--rte-toolbar-border);
+}
+.xplor-rte__char-count--limit {
+  color: var(--rte-error-color);
+  font-weight: 600;
+}
+
+.xplor-rte__error {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--rte-error-color);
+  padding: 0 0.25rem;
+}
+
+.xplor-rte__helper {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--color-gray-500, #9e9e9e);
+  padding: 0 0.25rem;
+}
+
+:host(.dark) {
+  --rte-bg: var(--color-surface-dark, #1e1e1e);
+  --rte-text-color: var(--color-on-surface-dark, #e0e0e0);
+  --rte-border-color: var(--color-gray-600, #757575);
+  --rte-toolbar-bg: var(--color-gray-800, #424242);
+  --rte-toolbar-border: var(--color-gray-700, #616161);
+  --rte-btn-color: var(--color-gray-300, #e0e0e0);
+  --rte-btn-hover-bg: var(--color-gray-700, #616161);
+  --rte-btn-active-bg: rgba(0, 132, 128, 0.2);
+  --rte-placeholder-color: var(--color-gray-600, #757575);
+}