$editor-border: var(--rz-input-border) !default;
$editor-border-radius: var(--rz-border-radius) !default;
$editor-toolbar-background-color: var(--rz-base-background-color) !default;
$editor-content-background-color: var(--rz-base-background-color) !default;
$editor-focus-outline: var(--rz-outline-focus) !default;
$editor-focus-outline-offset: calc(-1 * var(--rz-outline-width)) !default;

.rz-html-editor {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-radius: var(--rz-editor-border-radius);
  border: var(--rz-editor-border);
  overflow: hidden;

  &:focus-within {
    outline: var(--rz-editor-focus-outline);
    outline-offset: var(--rz-editor-focus-outline-offset);
  }
}

.rz-html-editor-content {
  flex: 1;
  overflow: auto;
  padding: 0.5rem;
  outline: none;
  background-color: var(--rz-editor-content-background-color);

  td.rz-html-editor-cell-selected,
  th.rz-html-editor-cell-selected {
    outline: 2px solid var(--rz-primary);
    outline-offset: -2px;
    background-color: color-mix(in srgb, var(--rz-primary) 12%, transparent);
  }
}

.rz-html-editor-source.rz-textarea {
    --rz-input-hover-shadow: none;
    --rz-input-border: none;
    --rz-input-hover-border: none;
    --rz-input-focus-shadow: none;
    --rz-input-focus-border: none;
    flex: 1;
    padding: 0.5rem;
    overflow: auto;
    outline: none;
    background-color: var(--rz-editor-content-background-color);
}

.rz-html-editor-toolbar {
  border-bottom: var(--rz-editor-border);
  background-color: var(--rz-editor-toolbar-background-color);
  padding: 0.25rem;
}

.rz-html-editor-dialog-item {
  margin-bottom: 1rem;

  label {
    &:first-child {
      display: block;
    }
  }
}

.rz-html-editor-dialog-buttons {
  text-align: right;
}

.rz-html-editor-table-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
