@thangph2146/lexical-editor 0.0.1

package/src/themes/ui-components.scss

@@ -0,0 +1,936 @@
+@use "variables" as *;
+@use "mixins" as *;
+
+/* --- TABS --- */
+.editor-tabs-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: calc(var(--radius) - 2px);
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  color: var(--muted-foreground);
+
+  @include focus-ring;
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &[data-state="active"] {
+    background-color: var(--background);
+    color: var(--foreground);
+    @include shadow-sm;
+  }
+}
+
+.editor-tabs-list {
+  display: inline-flex;
+  height: 2.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius);
+  background-color: var(--muted);
+  padding: 0.25rem;
+  color: var(--muted-foreground);
+}
+
+.editor-tabs-content {
+  margin-top: 0.5rem;
+  @include focus-ring;
+}
+
+/* --- FLEX Component Utilities --- */
+.editor-flex {
+  display: flex;
+  
+  // Align
+  &--items-start { align-items: flex-start; }
+  &--items-center { align-items: center; }
+  &--items-end { align-items: flex-end; }
+  &--items-baseline { align-items: baseline; }
+  &--items-stretch { align-items: stretch; }
+  
+  // Justify
+  &--justify-start { justify-content: flex-start; }
+  &--justify-center { justify-content: center; }
+  &--justify-end { justify-content: flex-end; }
+  &--justify-between { justify-content: space-between; }
+  &--justify-around { justify-content: space-around; }
+  &--justify-evenly { justify-content: space-evenly; }
+  
+  // Direction
+  &--flex-row { flex-direction: row; }
+  &--flex-col { flex-direction: column; }
+  &--flex-column { flex-direction: column; }
+  &--flex-row-reverse { flex-direction: row-reverse; }
+  &--flex-col-reverse { flex-direction: column-reverse; }
+  &--flex-column-reverse { flex-direction: column-reverse; }
+  
+  // Wrap
+  &--flex-nowrap { flex-wrap: nowrap; }
+  &--flex-wrap { flex-wrap: wrap; }
+  &--flex-wrap-reverse { flex-wrap: wrap-reverse; }
+}
+
+.editor-flex-1 {
+  flex: 1 1 0%;
+}
+
+.editor-w-full {
+  width: 100%;
+}
+
+.editor-w-14 {
+  width: 3.5rem;
+}
+
+.editor-w-48 {
+  width: 12rem;
+}
+
+.editor-w-\[200px\] {
+  width: 200px;
+}
+
+.editor-h-full {
+  height: 100%;
+}
+
+.editor-h-4 {
+  height: 1rem;
+}
+
+.editor-overflow-hidden {
+  overflow: hidden;
+}
+
+.editor-fixed {
+  position: fixed;
+}
+
+.editor-absolute {
+  position: absolute;
+}
+
+.editor-absolute-full {
+  position: absolute;
+  inset: 0;
+}
+
+.editor-relative {
+  position: relative;
+}
+
+.editor-relative-full {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.editor-inline-block {
+  display: inline-block;
+}
+
+.editor-block {
+  display: block;
+}
+
+.editor-inset-0 {
+  inset: 0;
+}
+
+.editor-pointer-events-none {
+  pointer-events: none;
+}
+
+.editor-select-none {
+  user-select: none;
+}
+
+.editor-text-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.editor-z-10 {
+  z-index: 10;
+}
+
+/* --- ROUNDED --- */
+.editor-rounded-sm { border-radius: calc(var(--radius) - 4px); }
+.editor-rounded-md { border-radius: calc(var(--radius) - 2px); }
+.editor-rounded-lg { border-radius: var(--radius); }
+.editor-rounded-full { border-radius: 9999px; }
+
+/* --- SHADOW --- */
+.editor-shadow-sm { @include shadow-sm; }
+.editor-shadow-md { @include shadow-md; }
+.editor-shadow-lg { @include shadow-lg; }
+
+/* --- BACKGROUNDS --- */
+.editor-bg-background { background-color: var(--background); }
+.editor-bg-primary { background-color: $editor-primary-color; }
+.editor-bg-muted { background-color: var(--muted); }
+.editor-bg-accent { background-color: $editor-accent-color; }
+.editor-bg-transparent { background-color: transparent; }
+.editor-bg-none { background: none; }
+
+/* --- MARGINS --- */
+.editor-mb-2 { margin-bottom: 0.5rem; }
+.editor-mb-3 { margin-bottom: 0.75rem; }
+.editor-mt-1 { margin-top: 0.25rem; }
+.editor-ml-auto { margin-left: auto; }
+.editor-ml-4 { margin-left: 1rem; }
+.editor-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
+.editor-px-8 { padding-left: 2rem; padding-right: 2rem; }
+.editor-py-18 { padding-top: 18px; padding-bottom: 18px; }
+
+/* --- SIZES --- */
+.editor-h-2 { height: 0.5rem; }
+.editor-w-2 { width: 0.5rem; }
+
+/* --- POSITIONING --- */
+.editor--top-2-5 { top: -0.625rem; }
+.editor--right-2-5 { right: -0.625rem; }
+.editor--bottom-2-5 { bottom: -0.625rem; }
+.editor--left-2-5 { left: -0.625rem; }
+.editor-top-1-2 { top: 50%; }
+.editor-left-1-2 { left: 50%; }
+.editor-translate-x-1-2 { transform: translateX(-50%); }
+.editor-translate-y-1-2 { transform: translateY(-50%); }
+
+/* --- CURSORS --- */
+.editor-cursor-ns-resize { cursor: ns-resize; }
+.editor-cursor-ew-resize { cursor: ew-resize; }
+.editor-cursor-nesw-resize { cursor: nesw-resize; }
+.editor-cursor-nwse-resize { cursor: nwse-resize; }
+
+/* --- TEXT UTILITIES --- */
+.editor-text-muted-xs {
+  font-size: 0.75rem;
+  color: var(--muted-foreground);
+}
+
+.editor-text-sm {
+  font-size: 0.875rem;
+}
+
+.editor-font-medium {
+  font-weight: 500;
+}
+
+/* --- UTILITIES --- */
+.editor-text-muted-foreground { color: var(--muted-foreground); }
+.editor-block { display: block; }
+.editor-inline { display: inline; }
+.editor-inline-block { display: inline-block; }
+.editor-min-h-5 { min-height: 1.25rem; }
+.editor-resize-none { resize: none; }
+.editor-border-0 { border-width: 0; }
+.editor-bg-transparent { background-color: transparent; }
+.editor-px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
+.editor-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.editor-whitespace-pre-wrap { white-space: pre-wrap; }
+.editor-outline-none { outline: 2px solid transparent; outline-offset: 2px; }
+.editor-word-break-break-word { word-break: break-word; }
+.editor-box-border { box-sizing: border-box; }
+.editor-cursor-text { cursor: text; }
+.editor-caret-primary { caret-color: var(--primary); }
+.editor-user-select-text { user-select: text; }
+.editor-cursor-default { cursor: default; }
+.editor-select-text { user-select: text; }
+.editor-top-0 { top: 0; }
+.editor-left-0 { left: 0; }
+.editor-text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.editor-opacity-30 { opacity: 0.3; }
+.editor-p-1 { padding: 0.25rem; }
+.editor-p-2 { padding: 0.5rem; }
+.editor-px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
+.editor-px-0 { padding-left: 0; padding-right: 0; }
+.editor-rotate-90 { transform: rotate(90deg); }
+.editor-transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.editor-shrink-0 { flex-shrink: 0; }
+.editor-flex-grow { flex-grow: 1; }
+.editor-flex-end { display: flex; justify-content: flex-end; align-items: center; }
+.editor-ml-auto { margin-left: auto; }
+.editor-ml-4 { margin-left: 1rem; }
+.editor-mr-1-5 { margin-right: 0.375rem; }
+.editor-mt-1 { margin-top: 0.25rem; }
+.editor-mt-2 { margin-top: 0.5rem; }
+.editor-mb-2 { margin-bottom: 0.5rem; }
+.editor-mb-3 { margin-bottom: 0.75rem; }
+.editor-gap-1 { gap: 0.25rem; }
+.editor-gap-2 { gap: 0.5rem; }
+.editor-items-center { align-items: center; }
+.editor-justify-center { justify-content: center; }
+.editor-flex-col { flex-direction: column; }
+.editor-flex-wrap { flex-wrap: wrap; }
+.editor-cursor-pointer { cursor: pointer; }
+.editor-border { border: 1px solid var(--border); }
+.editor-border-transparent { border-color: transparent; }
+.editor-uppercase { text-transform: uppercase; }
+.editor-transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.editor-animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+.editor-whitespace-nowrap { white-space: nowrap; }
+.editor-text-foreground-50 { color: color-mix(in srgb, var(--foreground), transparent 50%); }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: .5; }
+}
+
+.editor-flex-center-justify-py-8 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.editor-object-cover { object-fit: cover; }
+
+.editor-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* --- ICONS --- */
+.editor-icon-xs { width: 0.75rem; height: 0.75rem; } // 12px
+.editor-icon-sm { width: 1rem; height: 1rem; } // 16px
+.editor-icon-md { width: 1.25rem; height: 1.25rem; } // 20px
+.editor-icon-lg { width: 1.5rem; height: 1.5rem; } // 24px
+.editor-icon-xl { width: 2rem; height: 2rem; } // 32px
+
+/* --- TYPOGRAPHY --- */
+.editor-typography-p {
+  line-height: 1.75rem;
+  &:not(:first-child) { margin-top: 1.5rem; }
+}
+
+.editor-typography-p-small {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.editor-typography-span-small-muted {
+  font-size: 0.875rem;
+  color: var(--muted-foreground);
+}
+
+/* --- TOGGLE GROUP --- */
+.editor-toggle-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+.editor-toggle-group-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius);
+  font-size: 0.875rem;
+  font-weight: 500;
+  background-color: transparent;
+  color: var(--foreground);
+  transition: all 0.2s;
+  cursor: pointer;
+  border: 1px solid transparent;
+  padding: 0.5rem;
+  line-height: 1;
+
+  &:hover {
+    background-color: var(--muted);
+    color: var(--muted-foreground);
+  }
+
+  &[data-state="on"] {
+    background-color: $editor-accent-color;
+    color: $editor-accent-foreground-color !important;
+  }
+
+  &--size-sm {
+    padding: 0.25rem;
+    font-size: 0.75rem;
+  }
+
+  &--size-lg {
+    padding: 0.75rem;
+    font-size: 1rem;
+  }
+
+  &--outline {
+    border-color: var(--border);
+    &:hover {
+      background-color: $editor-accent-color;
+      border-color: $editor-accent-color;
+    }
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}
+
+/* --- BUTTON --- */
+.editor-btn {
+  @include flex-center-justify;
+  white-space: nowrap;
+  border-radius: var(--radius);
+  font-weight: 500;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  @include text-sm;
+  @include focus-ring;
+  border: 1px solid var(--input); // Default border
+  cursor: pointer;
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &[data-state="on"] {
+    background-color: $editor-accent-color;
+    color: $editor-accent-foreground-color !important;
+    border-color: $editor-accent-color;
+  }
+
+  &--default {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-color: var(--primary);
+    &:hover {
+      background-color: color-mix(in srgb, var(--primary), black 10%);
+    }
+  }
+
+  &--destructive {
+    background-color: var(--destructive);
+    color: var(--destructive-foreground);
+    border-color: var(--destructive);
+    &:hover {
+      background-color: color-mix(in srgb, var(--destructive), black 10%);
+    }
+  }
+
+  &--outline {
+    border-color: var(--input);
+    background-color: var(--background);
+    &:hover {
+      background-color: $editor-accent-color;
+      color: $editor-accent-foreground-color;
+    }
+  }
+
+  &--secondary {
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    border-color: transparent;
+    &:hover {
+      background-color: color-mix(in srgb, var(--secondary), black 10%);
+    }
+  }
+
+  &--ghost {
+    background-color: transparent;
+    border-color: transparent;
+    &:hover {
+      background-color: $editor-accent-color;
+      color: $editor-accent-foreground-color;
+    }
+  }
+
+  &--link {
+    color: var(--primary);
+    text-decoration-line: underline;
+    text-underline-offset: 4px;
+    background-color: transparent;
+    &:hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  /* Sizes */
+  &--size-default {
+    height: 2.25rem; /* h-9 */
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  &--size-sm {
+    height: 2rem; /* h-8 */
+    border-radius: calc(var(--radius) - 2px);
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    font-size: 0.75rem; /* xs */
+  }
+  &--size-md {
+    height: 2.25rem; /* h-9 */
+    width: 2.25rem; /* w-9 */
+    padding: 0;
+  }
+  &--size-lg {
+    height: 2.5rem; /* h-10 */
+    border-radius: calc(var(--radius) + 2px);
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+  &--size-icon {
+    height: 2.25rem; /* h-9 */
+    width: 2.25rem; /* w-9 */
+    padding: 0;
+  }
+}
+
+/* --- BUTTON GROUP --- */
+.editor-button-group {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/* --- SEPARATOR --- */
+.editor-separator {
+  background-color: var(--border);
+  flex-shrink: 0;
+
+  &--horizontal {
+    height: 1px;
+    width: 100%;
+  }
+
+  &--vertical {
+    width: 1px;
+    height: 100%;
+    min-height: 1.5rem;
+  }
+}
+
+/* --- INPUT --- */
+.editor-input {
+  display: flex;
+  height: 2.25rem; /* h-9 */
+  width: 100%;
+  border-radius: var(--radius);
+  border: 1px solid var(--input);
+  background-color: var(--background);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  @include text-sm;
+  
+  &::file-selector-button {
+    border: 0;
+    background-color: transparent;
+    font-size: 0.875rem;
+    font-weight: 500;
+  }
+  
+  &::placeholder {
+    color: var(--muted-foreground);
+  }
+  
+  &:focus {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px var(--ring);
+    outline: none;
+  }
+  
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background);
+  }
+  
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &:hover:not(:disabled):not([readonly]) {
+    background-color: color-mix(in srgb, var(--background), black 3%);
+    color: black !important;
+    border-color: $editor-accent-color;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1);
+  }
+
+  /* Hide spin buttons for input[type=number] */
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  
+  &[type=number] {
+    -moz-appearance: textfield;
+  }
+}
+
+/* --- INPUT GROUP ITEM --- */
+.editor-input-group-item {
+  &--first {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  &--middle {
+    border-radius: 0;
+    border-left-width: 0;
+  }
+  &--last {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left-width: 0;
+  }
+}
+
+/* --- LABEL --- */
+.editor-label {
+  @include text-sm;
+  font-weight: 500;
+  line-height: 1;
+  
+  &--disabled {
+    cursor: not-allowed;
+    opacity: 0.7;
+  }
+}
+
+/* --- DIALOG --- */
+@keyframes editor-dialog-zoom-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes editor-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes editor-popover-zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.editor-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgba(0, 0, 0, 0.4); /* Lighter backdrop for better feel */
+  backdrop-filter: blur(4px);
+  animation: editor-fade-in 0.2s ease-out;
+  
+  &[data-state="open"] {
+    animation: editor-fade-in 0.2s ease-out;
+  }
+}
+
+.editor-dialog-content {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  z-index: 51;
+  display: grid;
+  width: 100%;
+  max-width: 32rem; /* max-w-lg */
+  transform: translate(-50%, -50%);
+  gap: 1.5rem;
+  border: 1px solid var(--border);
+  background-color: var(--background);
+  padding: 1.5rem;
+  @include shadow-lg;
+  border-radius: calc(var(--radius) + 4px); /* rounded-lg */
+  animation: editor-dialog-zoom-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &--lg {
+    max-width: 50rem;
+  }
+
+  &__close {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    border-radius: var(--radius);
+    opacity: 0.7;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    
+    &:hover {
+      opacity: 1;
+    }
+    
+    @include focus-ring;
+  }
+}
+
+.editor-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem; /* space-y-1.5 */
+  text-align: center;
+  
+  @media (min-width: 640px) {
+    text-align: left;
+  }
+
+  &__title {
+    font-size: 1.125rem; /* text-lg */
+    font-weight: 600;
+    line-height: 1;
+    margin: 0;
+  }
+
+  &__description {
+    @include text-sm;
+    color: var(--muted-foreground);
+    margin: 0;
+  }
+}
+
+.editor-dialog-footer {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem; /* sm:space-x-2 */
+  
+  @media (min-width: 640px) {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}
+
+/* --- POPOVER --- */
+.editor-popover-content {
+  z-index: 50;
+  width: 18rem; /* w-72 */
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background-color: var(--popover);
+  color: var(--popover-foreground);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
+  padding: 1rem;
+  outline: none;
+  animation: editor-popover-zoom-in 0.1s ease-out;
+}
+
+/* --- SELECT (Native styling wrapper) --- */
+.editor-select {
+  display: flex;
+  height: 2.25rem; /* h-9 */
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: var(--radius);
+  border: 1px solid var(--input);
+  background-color: var(--background);
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  @include text-sm;
+  
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background);
+  }
+  
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  
+  /* Sizes */
+  &--size-default {
+    height: 2.25rem; /* h-9 */
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+  
+  &--size-sm {
+    height: 2rem; /* h-8 */
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    font-size: 0.75rem; /* xs */
+  }
+  
+  &--size-lg {
+    height: 2.5rem; /* h-10 */
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  
+  &--size-icon {
+    height: 2.25rem; /* h-9 */
+    width: 2.25rem; /* w-9 */
+    padding: 0;
+    justify-content: center;
+    
+    // Hide chevron if it's an icon button, or make it small overlay? 
+    // Usually icon select trigger implies the content IS the icon.
+    .editor-select-icon {
+      display: none; 
+    }
+  }
+
+  &--w-auto {
+    width: auto;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+    min-width: 7rem; // 112px - Ensures button isn't too narrow
+    justify-content: space-between; // Ensure content is spaced if it's a select
+  }
+
+  &--gap-sm {
+    gap: 0.5rem;
+  }
+}
+
+.editor-select-item {
+  position: relative;
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  user-select: none;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 0.125rem; /* rounded-sm */
+  padding: 0.375rem 0.5rem 0.375rem 2rem; /* py-1.5 pl-8 pr-2 */
+  font-size: 0.875rem; /* text-sm */
+  outline: none;
+
+  &:hover {
+    background-color: $editor-accent-color;
+    color: $editor-accent-foreground-color;
+  }
+  
+  &[data-selected="true"] {
+    background-color: $editor-accent-color;
+    color: $editor-accent-foreground-color;
+  }
+  
+  &__check {
+    position: absolute;
+    left: 0.5rem; /* left-2 */
+    display: flex;
+    height: 0.875rem; /* h-3.5 */
+    width: 0.875rem; /* w-3.5 */
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.editor-select-label {
+  padding: 0.375rem 0.5rem 0.375rem 2rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.editor-block-format-label {
+  max-width: 80px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* --- TOGGLE --- */
+.editor-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(var(--radius) - 2px); // rounded-md
+  font-size: 0.875rem; // text-sm
+  font-weight: 500;
+  transition-property: color, background-color, border-color;
+  transition-duration: 150ms;
+  background-color: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
+  
+  &:hover {
+    background-color: $editor-accent-color;
+    color: $editor-accent-foreground-color;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--ring), 0 0 0 4px var(--background);
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &[data-state="on"] {
+    background-color: $editor-accent-color;
+    color: $editor-accent-foreground-color !important;
+  }
+
+  &--outline {
+    border-color: var(--input);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // shadow-sm
+    &:hover {
+      background-color: color-mix(in srgb, $editor-accent-color, black 50%);
+      color: $editor-accent-foreground-color;
+    }
+  }
+
+  &--ghost {
+    &:hover {
+      background-color: color-mix(in srgb, $editor-accent-color, black 50%);
+      color: $editor-accent-foreground-color;
+    }
+  }
+
+  &--size-default {
+    height: 2.25rem; // h-9
+    padding-left: 0.75rem; // px-3
+    padding-right: 0.75rem;
+  }
+
+  &--size-sm {
+    height: 2rem; // h-8
+    padding-left: 0.5rem; // px-2
+    padding-right: 0.5rem;
+    font-size: 0.75rem; // text-xs
+  }
+  
+  &--size-lg {
+    height: 2.5rem; // h-10
+    padding-left: 0.75rem; // px-3
+    padding-right: 0.75rem;
+  }
+}