/* Rich Text Editor Component */


/* Component-specific custom properties */
.c-rich-text-editor {
  /* Base properties */
  --c-rich-text-editor-font-family: var(--ds-font-family-sans);
  --c-rich-text-editor-font-size: var(--ds-font-size-m);
  --c-rich-text-editor-line-height: var(--ds-line-height-m);
  --c-rich-text-editor-border-radius: var(--ds-radius-s);
  --c-rich-text-editor-border-width: 1px;
  --c-rich-text-editor-border-style: solid;
  --c-rich-text-editor-transition: all var(--ds-duration-fast) var(--ds-ease-out);
  
  /* Colors */
  --c-rich-text-editor-background: var(--ds-color-surface);
  --c-rich-text-editor-border-color: var(--ds-color-border);
  --c-rich-text-editor-text-color: var(--ds-color-text);
  --c-rich-text-editor-placeholder-color: var(--ds-color-text-weaker);
  
  /* Toolbar */
  --c-rich-text-editor-toolbar-background: var(--ds-color-surface-raised);
  --c-rich-text-editor-toolbar-border-color: var(--ds-color-border-strong);
  --c-rich-text-editor-toolbar-padding: var(--ds-space-s) var(--ds-space-m);
  
  /* Sizes */
  --c-rich-text-editor-min-height: 6rem;
  --c-rich-text-editor-max-height: 36rem;
  --c-rich-text-editor-padding: var(--ds-space-m);
  
  /* Focus state */
  --c-rich-text-editor-border-color-focus: var(--ds-color-accent);
  --c-rich-text-editor-box-shadow-focus: 0 0 0 2px var(--ds-color-accent-alpha);
  
  /* Error state */
  --c-rich-text-editor-border-color-error: var(--ds-color-border-danger);
  --c-rich-text-editor-box-shadow-error: 0 0 0 2px var(--ds-color-danger-alpha);
}

/* Base component */
.c-rich-text-editor {
  display: flex;
  flex-direction: column;
  max-inline-size: 100%;
  font-family: var(--c-rich-text-editor-font-family);
}

/* Label */
.c-rich-text-editor__label {
  display: block;
  margin-block-end: var(--ds-space-s);
  font-size: var(--ds-font-size-m);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text);
  line-height: var(--ds-line-height-s);
}

.c-rich-text-editor__label--required::after {
  content: " *";
  color: var(--ds-color-text-danger);
}

.c-rich-text-editor__label--optional::after {
  content: " (optional)";
  color: var(--ds-color-text-weaker);
  font-weight: var(--ds-font-weight-normal);
}

/* Hint */
.c-rich-text-editor__hint {
  margin-block-end: var(--ds-space-s);
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-weak);
  line-height: var(--ds-line-height-s);
}

/* Container */
.c-rich-text-editor__container {
  display: flex;
  flex-direction: column;
  border: var(--c-rich-text-editor-border-width) var(--c-rich-text-editor-border-style) var(--c-rich-text-editor-border-color);
  border-radius: var(--c-rich-text-editor-border-radius);
  background: var(--c-rich-text-editor-background);
  transition: var(--c-rich-text-editor-transition);
  overflow: hidden;
}

.c-rich-text-editor__container:focus-within {
  border-color: var(--c-rich-text-editor-border-color-focus);
  box-shadow: var(--c-rich-text-editor-box-shadow-focus);
}

/* Toolbar */
.c-rich-text-editor__toolbar {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  padding: var(--c-rich-text-editor-toolbar-padding);
  background: var(--c-rich-text-editor-toolbar-background);
  border-block-end: var(--c-rich-text-editor-border-width) var(--c-rich-text-editor-border-style) var(--c-rich-text-editor-toolbar-border-color);
  flex-wrap: wrap;
}

.c-rich-text-editor__toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
}

.c-rich-text-editor__toolbar-group:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 1.5rem;
  background: var(--ds-color-border);
  margin-inline: var(--ds-space-xs);
}

/* Toolbar buttons */
.c-rich-text-editor__toolbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: var(--ds-space-xs);
  border: 1px solid transparent;
  border-radius: var(--ds-radius-s);
  background: transparent;
  color: var(--ds-color-text);
  font-size: var(--ds-font-size-s);
  cursor: pointer;
  transition: var(--c-rich-text-editor-transition);
}

.c-rich-text-editor__toolbar-button:hover {
  background: var(--ds-color-surface-lowered);
  color: var(--ds-color-text-hover);
}

.c-rich-text-editor__toolbar-button:focus {
  outline: 2px solid var(--ds-color-accent);
  outline-offset: 2px;
}

.c-rich-text-editor__toolbar-button--active {
  background: var(--ds-color-surface-lowered);
  color: var(--ds-color-accent);
  border-color: var(--ds-color-border-strong);
}

.c-rich-text-editor__toolbar-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Dropdown for toolbar */
.c-rich-text-editor__dropdown {
  position: relative;
  display: inline-block;
}

.c-rich-text-editor__dropdown-content {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--ds-z-index-dropdown);
  min-width: 8rem;
  margin-block-start: var(--ds-space-xs);
  padding: var(--ds-space-xs);
  background: var(--ds-color-surface);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-s);
  box-shadow: var(--ds-shadow-m);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: var(--c-rich-text-editor-transition);
}

.c-rich-text-editor__dropdown--open .c-rich-text-editor__dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.c-rich-text-editor__dropdown-item {
  display: block;
  width: 100%;
  padding: var(--ds-space-xs) var(--ds-space-s);
  border: none;
  background: transparent;
  color: var(--ds-color-text);
  font-size: var(--ds-font-size-s);
  text-align: left;
  cursor: pointer;
  border-radius: var(--ds-radius-xs);
  transition: var(--c-rich-text-editor-transition);
}

.c-rich-text-editor__dropdown-item:hover {
  background: var(--ds-color-surface-lowered);
}

/* Editor area */
.c-rich-text-editor__editor {
  min-height: var(--c-rich-text-editor-min-height);
  max-height: var(--c-rich-text-editor-max-height);
  padding: var(--c-rich-text-editor-padding);
  font-family: var(--c-rich-text-editor-font-family);
  font-size: var(--c-rich-text-editor-font-size);
  line-height: var(--c-rich-text-editor-line-height);
  color: var(--c-rich-text-editor-text-color);
  background: var(--c-rich-text-editor-background);
  border: none;
  outline: none;
  overflow-y: auto;
  resize: vertical;
}

.c-rich-text-editor__editor:empty::before {
  content: attr(data-placeholder);
  color: var(--c-rich-text-editor-placeholder-color);
  pointer-events: none;
}

/* Size variants */
.c-rich-text-editor__editor--size-xs {
  --c-rich-text-editor-min-height: 10rem;
  height: 10rem;
}

.c-rich-text-editor__editor--size-s {
  --c-rich-text-editor-min-height: 16rem;
  height: 16rem;
}

.c-rich-text-editor__editor--size-m {
  --c-rich-text-editor-min-height: 26rem;
  height: 26rem;
}

.c-rich-text-editor__editor--size-l {
  --c-rich-text-editor-min-height: 36rem;
  height: 36rem;
}

/* Min size variants */
.c-rich-text-editor__editor--min-size-xs {
  min-height: 10rem;
}

.c-rich-text-editor__editor--min-size-s {
  min-height: 16rem;
}

.c-rich-text-editor__editor--min-size-m {
  min-height: 26rem;
}

.c-rich-text-editor__editor--min-size-l {
  min-height: 36rem;
}

/* Non-resizable */
.c-rich-text-editor__editor--no-resize {
  resize: none;
}

/* Content styling */
.c-rich-text-editor__editor h1 {
  font-size: var(--ds-font-size-xl);
  font-weight: var(--ds-font-weight-bold);
  margin-block: var(--ds-space-m) var(--ds-space-s);
  line-height: var(--ds-line-height-s);
}

.c-rich-text-editor__editor h2 {
  font-size: var(--ds-font-size-l);
  font-weight: var(--ds-font-weight-bold);
  margin-block: var(--ds-space-m) var(--ds-space-s);
  line-height: var(--ds-line-height-s);
}

.c-rich-text-editor__editor h3 {
  font-size: var(--ds-font-size-m);
  font-weight: var(--ds-font-weight-bold);
  margin-block: var(--ds-space-m) var(--ds-space-s);
  line-height: var(--ds-line-height-s);
}

.c-rich-text-editor__editor p {
  margin-block: var(--ds-space-s);
}

.c-rich-text-editor__editor ul,
.c-rich-text-editor__editor ol {
  margin-block: var(--ds-space-s);
  padding-inline-start: var(--ds-space-l);
}

.c-rich-text-editor__editor li {
  margin-block: var(--ds-space-xs);
}

.c-rich-text-editor__editor li p {
  margin: 0;
}

.c-rich-text-editor__editor blockquote {
  margin-block: var(--ds-space-m);
  margin-inline: 0;
  padding-inline-start: var(--ds-space-m);
  border-inline-start: 2px solid var(--ds-color-border);
  font-style: italic;
  color: var(--ds-color-text-weak);
}

.c-rich-text-editor__editor table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--ds-space-m);
  overflow-x: auto;
  display: block;
}

.c-rich-text-editor__editor table th,
.c-rich-text-editor__editor table td {
  padding: var(--ds-space-s);
  border: 1px solid var(--ds-color-border);
  text-align: left;
  vertical-align: top;
}

.c-rich-text-editor__editor table th {
  background: var(--ds-color-surface-raised);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text-weak);
}

.c-rich-text-editor__editor table tr:hover {
  background: var(--ds-color-surface-lowered);
}

/* Footer */
.c-rich-text-editor__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ds-space-s) var(--ds-space-m);
  background: var(--ds-color-surface-raised);
  border-block-start: 1px solid var(--ds-color-border);
}

/* Character counter */
.c-rich-text-editor__counter {
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-weak);
}

.c-rich-text-editor__counter--over-limit {
  color: var(--ds-color-text-danger);
  font-weight: var(--ds-font-weight-medium);
}

/* Error state */
.c-rich-text-editor--error .c-rich-text-editor__container {
  border-color: var(--c-rich-text-editor-border-color-error);
}

.c-rich-text-editor--error .c-rich-text-editor__container:focus-within {
  box-shadow: var(--c-rich-text-editor-box-shadow-error);
}

.c-rich-text-editor__error {
  margin-block-start: var(--ds-space-xs);
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-danger);
  line-height: var(--ds-line-height-s);
}

/* Disabled state */
.c-rich-text-editor--disabled {
  opacity: 0.6;
  pointer-events: none;
}

.c-rich-text-editor--disabled .c-rich-text-editor__container {
  background: var(--ds-color-surface-lowered);
  border-color: var(--ds-color-border);
}

/* Custom header/footer slots */
.c-rich-text-editor__header {
  padding: var(--ds-space-m);
  background: var(--ds-color-surface-raised);
  border-block-end: 1px solid var(--ds-color-border);
}

.c-rich-text-editor__custom-footer {
  padding: var(--ds-space-m);
  background: var(--ds-color-surface-raised);
  border-block-start: 1px solid var(--ds-color-border);
}

/* With footer modifier */
.c-rich-text-editor--with-footer .c-rich-text-editor__editor {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}