@liveblocks/react-ui 1.12.0-initial1

package/src/styles/index.css

@@ -0,0 +1,1437 @@
+@import "./utils";
+@import "./constants";
+
+.lb-root {
+  /** 
+   * Basic
+   */
+  --lb-radius: 0.5em;
+  --lb-spacing: 1em;
+  --lb-accent: #17f;
+  --lb-accent-foreground: #fff;
+  --lb-destructive: #f45;
+  --lb-destructive-foreground: #fff;
+  --lb-background: #fff;
+  --lb-foreground: #111;
+
+  /** 
+   * Advanced
+   */
+  --lb-icon-size: 20px;
+  --lb-icon-weight: 1.5px;
+  --lb-avatar-radius: 50%;
+  --lb-button-radius: calc(0.75 * var(--lb-radius));
+  --lb-transition-duration: 0.1s;
+  --lb-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --lb-elevation-shadow: $lb-elevation-shadow;
+  --lb-tooltip-shadow: $lb-tooltip-shadow;
+  --lb-accent-contrast: 8%;
+  --lb-destructive-contrast: 8%;
+  --lb-foreground-contrast: 8%;
+
+  /** 
+   * Colors
+   */
+  --lb-background-foreground-faint: color-mix-scale(
+    var(--lb-background),
+    var(--lb-foreground),
+    var(--lb-foreground-contrast),
+    50
+  );
+  --lb-background-accent-faint: color-mix-scale(
+    var(--lb-background),
+    var(--lb-accent),
+    var(--lb-accent-contrast),
+    50
+  );
+  --lb-background-accent-subtle: color-mix-scale(
+    var(--lb-background),
+    var(--lb-accent),
+    var(--lb-accent-contrast),
+    100
+  );
+  --lb-accent-subtle: color-mix-scale(
+    var(--lb-dynamic-background),
+    var(--lb-accent),
+    var(--lb-accent-contrast),
+    100
+  );
+  --lb-accent-moderate: color-mix-scale(
+    var(--lb-dynamic-background),
+    var(--lb-accent),
+    var(--lb-accent-contrast),
+    400
+  );
+  --lb-accent-tertiary: color-mix-scale(
+    var(--lb-dynamic-background),
+    var(--lb-accent),
+    var(--lb-accent-contrast),
+    600
+  );
+  --lb-accent-secondary: color-mix-scale(
+    var(--lb-dynamic-background),
+    var(--lb-accent),
+    var(--lb-accent-contrast),
+    800
+  );
+  --lb-foreground-subtle: color-mix-scale(
+    var(--lb-dynamic-background),
+    var(--lb-foreground),
+    var(--lb-foreground-contrast),
+    100
+  );
+  --lb-foreground-moderate: color-mix-scale(
+    var(--lb-dynamic-background),
+    var(--lb-foreground),
+    var(--lb-foreground-contrast),
+    400
+  );
+  --lb-foreground-tertiary: color-mix-scale(
+    var(--lb-dynamic-background),
+    var(--lb-foreground),
+    var(--lb-foreground-contrast),
+    600
+  );
+  --lb-foreground-secondary: color-mix-scale(
+    var(--lb-dynamic-background),
+    var(--lb-foreground),
+    var(--lb-foreground-contrast),
+    800
+  );
+
+  overflow-wrap: break-word;
+  accent-color: var(--lb-accent);
+  text-size-adjust: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  &,
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    transition: none var(--lb-transition-duration) var(--lb-transition-easing);
+  }
+
+  /* Define some variables only on first .lb-root instances */
+  &:where(:not(& &)) {
+    --lb-dynamic-background: var(--lb-background);
+  }
+}
+
+/*************************************
+ *               Icon                *
+ *************************************/
+
+.lb-icon {
+  --lb-icon-background: var(--lb-dynamic-background);
+
+  inline-size: var(--lb-icon-size);
+  block-size: var(--lb-icon-size);
+
+  * {
+    stroke-width: var(--lb-icon-weight);
+    vector-effect: non-scaling-stroke;
+  }
+}
+
+/*************************************
+ *              Button               *
+ *************************************/
+
+.lb-button {
+  --lb-button-background: var(--lb-dynamic-background);
+
+  all: unset;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: inherit;
+  padding: calc(0.25 * var(--lb-spacing));
+  border-radius: var(--lb-button-radius);
+  background: var(--lb-button-background);
+  color: var(--lb-foreground-moderate);
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  transition-timing-function: var(--lb-transition-easing);
+  transition-duration: var(--lb-transition-duration);
+  transition-property: background, color, opacity;
+  -webkit-tap-highlight-color: transparent;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    transition-property: box-shadow;
+  }
+
+  &:where(:focus-visible) {
+    z-index: 1;
+
+    &::after {
+      box-shadow:
+        var(--lb-dynamic-background) 0 0 0 2px,
+        var(--lb-accent) 0 0 0 4px;
+    }
+  }
+
+  &:where(.lb-button\:non-disableable:disabled) {
+    cursor: default;
+  }
+
+  &:where(:not(.lb-button\:non-disableable):disabled) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &:where(
+      :enabled:hover,
+      :enabled:focus-visible,
+      [aria-expanded="true"],
+      [aria-selected="true"]
+    ) {
+    --lb-button-background: var(--lb-foreground-subtle);
+
+    color: var(--lb-foreground-tertiary);
+  }
+
+  &:where(
+      [data-variant="default"]:not(
+          :is(
+              :enabled:hover,
+              :enabled:focus-visible,
+              [aria-expanded="true"],
+              [aria-selected="true"]
+            )
+        )
+    ) {
+    background: transparent;
+  }
+
+  &:where([data-variant="primary"]) {
+    --lb-button-background: var(--lb-accent);
+
+    color: var(--lb-accent-foreground);
+
+    &:where(
+        :enabled:hover,
+        :enabled:focus-visible,
+        [aria-expanded="true"],
+        [aria-selected="true"]
+      ) {
+      --lb-button-background: var(--lb-accent-secondary);
+
+      color: var(--lb-accent-foreground);
+    }
+  }
+
+  &:where([data-variant="outline"]) {
+    box-shadow: inset 0 0 0 1px var(--lb-foreground-subtle);
+    transition-property: background, color, opacity, box-shadow;
+  }
+}
+
+.lb-button-icon {
+  --lb-icon-background: var(--lb-button-background);
+}
+
+/*************************************
+ *             Dropdown              *
+ *************************************/
+
+.lb-dropdown-item-icon {
+  margin-inline-start: calc(-0.125 * var(--lb-spacing));
+  margin-inline-end: calc(0.375 * var(--lb-spacing));
+  color: var(--lb-foreground-moderate);
+  transition-property: color;
+}
+
+.lb-dropdown-item:where(:is([data-highlighted], [data-selected])) {
+  :where(.lb-dropdown-item-icon) {
+    color: var(--lb-foreground-tertiary);
+  }
+}
+
+/*************************************
+ *       Composer suggestions        *
+ *************************************/
+
+.lb-composer-suggestions-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.lb-composer-suggestions-list-item {
+  scroll-margin-block: $lb-elevation-list-padding;
+}
+
+/*************************************
+ *   Composer mention suggestions    *
+ *************************************/
+
+.lb-composer-mention-suggestions {
+  --lb-composer-mention-suggestion-avatar-size: 1.25rem;
+}
+
+.lb-composer-mention-suggestion {
+  padding: calc(0.375 * var(--lb-spacing)) calc(0.625 * var(--lb-spacing));
+}
+
+.lb-composer-mention-suggestion-avatar {
+  inline-size: var(--lb-composer-mention-suggestion-avatar-size);
+  margin-inline-start: calc(-0.125 * var(--lb-spacing));
+  margin-inline-end: calc(0.5 * var(--lb-spacing));
+  margin-block: calc(0.125 * var(--lb-spacing));
+  background: var(--lb-foreground-subtle);
+  color: var(--lb-foreground-moderate);
+}
+
+/*************************************
+ *                List               *
+ *************************************/
+
+.lb-list {
+  display: contents;
+}
+
+/*************************************
+ *               Emoji               *
+ *************************************/
+
+@include safari-only {
+  .lb-emoji {
+    transform: scale(0.825);
+    will-change: transform;
+  }
+}
+
+/*************************************
+ *           Emoji picker            *
+ *************************************/
+
+.lb-emoji-picker {
+  --lb-emoji-picker-padding: $lb-emoji-picker-padding;
+  --lb-emoji-picker-offset-padding: calc(
+    $lb-emoji-picker-padding + 0.375 * var(--lb-spacing)
+  );
+
+  display: flex;
+  flex-direction: column;
+  block-size: 350px;
+  color: var(--lb-foreground);
+}
+
+.lb-emoji-picker-header {
+  flex: none;
+  border-block-end: 1px solid var(--lb-foreground-subtle);
+}
+
+.lb-emoji-picker-search-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.lb-emoji-picker-search {
+  all: unset;
+  box-sizing: inherit;
+  inline-size: 100%;
+  padding: var(--lb-emoji-picker-offset-padding);
+  padding-inline-start: calc(
+    var(--lb-icon-size) + var(--lb-emoji-picker-offset-padding) + 0.375 *
+      var(--lb-spacing)
+  );
+  background: transparent;
+  outline: none;
+  appearance: textfield;
+
+  &::placeholder {
+    color: var(--lb-foreground-moderate);
+  }
+
+  &::-webkit-search-cancel-button {
+    display: none;
+  }
+}
+
+.lb-emoji-picker-search-icon {
+  position: absolute;
+  inset-inline-start: var(--lb-emoji-picker-offset-padding);
+  color: var(--lb-foreground-moderate);
+  pointer-events: none;
+}
+
+.lb-emoji-picker-content {
+  position: relative;
+  flex: 1;
+}
+
+.lb-emoji-picker-loading,
+.lb-emoji-picker-empty,
+.lb-emoji-picker-error {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.lb-emoji-picker-loading {
+  color: var(--lb-foreground-moderate);
+}
+
+.lb-emoji-picker-empty,
+.lb-emoji-picker-error {
+  padding: var(--lb-spacing);
+  color: var(--lb-foreground-tertiary);
+  font-size: 0.875em;
+  text-align: center;
+  text-wrap: balance;
+}
+
+.lb-emoji-picker-category-header {
+  padding: var(--lb-emoji-picker-padding) var(--lb-emoji-picker-offset-padding);
+  background: var(--lb-dynamic-background);
+}
+
+.lb-emoji-picker-category-header-title {
+  color: var(--lb-foreground-tertiary);
+  font-weight: 600;
+  font-size: 0.675em;
+  text-transform: uppercase;
+}
+
+.lb-emoji-picker-grid {
+  position: absolute;
+  inset: 0;
+  animation: lb-animation-appear var(--lb-transition-duration)
+    var(--lb-transition-easing) both;
+}
+
+.lb-emoji-picker-row {
+  display: flex;
+  padding-inline: $lb-emoji-picker-padding;
+  scroll-margin-block: $lb-emoji-picker-padding;
+
+  &:where([data-last]) {
+    padding-block-end: $lb-emoji-picker-padding;
+  }
+}
+
+.lb-emoji-picker-emoji {
+  all: unset;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  box-sizing: inherit;
+  aspect-ratio: 1;
+  padding: calc(0.375 * var(--lb-spacing));
+  border-radius: calc(var(--lb-radius) - 0.75 * $lb-emoji-picker-padding);
+  text-align: center;
+}
+
+/*************************************
+ *             Tooltip               *
+ *************************************/
+
+.lb-tooltip {
+  --lb-background: #222;
+  --lb-foreground: #fff;
+  --lb-foreground-contrast: 10%;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-block-size: calc(
+    $lb-tooltip-shortcut-height + 2 * $lb-tooltip-additional-padding
+  );
+  padding-inline: $lb-tooltip-horizontal-padding;
+  border-radius: var(--lb-radius);
+  background: var(--lb-dynamic-background);
+  color: var(--lb-foreground);
+  box-shadow: var(--lb-tooltip-shadow);
+  font-size: 0.75rem;
+  line-height: 1;
+  pointer-events: none;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    box-shadow: var(--lb-inset-shadow);
+    pointer-events: none;
+  }
+}
+
+.lb-tooltip\:multiline {
+  justify-content: center;
+  padding-block: calc(
+    $lb-tooltip-vertical-padding * (1 / $lb-tooltip-line-height)
+  );
+  line-height: $lb-tooltip-line-height;
+  text-align: center;
+}
+
+.lb-tooltip-shortcut {
+  display: flex;
+  gap: calc(0.125 * var(--lb-spacing));
+  justify-content: center;
+  align-items: center;
+  block-size: $lb-tooltip-shortcut-height;
+  margin-inline-start: $lb-tooltip-horizontal-padding;
+  margin-inline-end: calc(
+    -1 * $lb-tooltip-horizontal-padding + $lb-tooltip-additional-padding
+  );
+  padding-inline: calc(0.25 * var(--lb-spacing));
+  border-radius: calc(
+    var(--lb-radius) - 0.625 * $lb-tooltip-additional-padding
+  );
+  background: var(--lb-foreground-subtle);
+  color: var(--lb-foreground-tertiary);
+  font-family: inherit;
+  line-height: 1;
+  text-transform: uppercase;
+
+  :where(abbr) {
+    all: unset;
+  }
+}
+
+/*************************************
+ *              Avatar               *
+ *************************************/
+
+.lb-avatar {
+  position: relative;
+  container-type: inline-size;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  aspect-ratio: 1;
+  border-radius: var(--lb-avatar-radius);
+  background: var(--lb-foreground-subtle);
+  color: var(--lb-foreground-moderate);
+
+  &:where([data-loading]) {
+    background: var(--lb-foreground);
+    opacity: $lb-loading-opacity;
+  }
+}
+
+.lb-avatar-image {
+  position: absolute;
+  inset: 0;
+  object-fit: cover;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.lb-avatar-fallback {
+  font-weight: 500;
+  font-size: 35cqi;
+  white-space: nowrap;
+
+  /**
+   * Progressive enhancement: Only show the fallback when container queries are supported
+   */
+  @supports not (container-type: inline-size) {
+    display: none;
+  }
+}
+
+/*************************************
+ *               Name                *
+ *************************************/
+
+.lb-name:where([data-loading]) {
+  &::before {
+    content: "\FEFF";
+    display: inline-block;
+    vertical-align: middle;
+    inline-size: 8ch;
+    block-size: 1.75ex;
+    border-radius: calc(0.5 * var(--lb-radius));
+    background: currentcolor;
+    opacity: $lb-loading-opacity;
+    user-select: none;
+  }
+}
+
+/*************************************
+ *              Loading              *
+ *************************************/
+
+:is(.lb-avatar, .lb-name):where([data-loading]) {
+  animation: lb-animation-shimmer 8s linear infinite;
+}
+
+/*************************************
+ *               Body                *
+ *************************************/
+
+:is(.lb-comment-body, .lb-composer-editor) {
+  color: var(--lb-foreground-secondary);
+
+  :where(p) {
+    margin-block-start: 0.25em;
+    margin-block-end: 0.25em;
+
+    &:where(:first-of-type) {
+      margin-block-start: 0;
+    }
+
+    &:where(:last-of-type) {
+      margin-block-end: 0;
+    }
+  }
+
+  :where(strong) {
+    font-weight: 600;
+  }
+}
+
+.lb-comment-mention,
+.lb-composer-mention {
+  color: var(--lb-accent);
+  box-decoration-break: clone;
+  font-weight: 500;
+}
+
+:is(.lb-comment-link, .lb-composer-link) {
+  color: var(--lb-foreground);
+  outline: none;
+  font-weight: 500;
+  transition-property: color, text-decoration-color;
+  text-decoration-line: underline;
+  text-decoration-color: var(--lb-foreground-moderate);
+  text-underline-offset: 2px;
+
+  &:where([href]):where(:hover, :focus-visible) {
+    color: var(--lb-accent);
+    text-decoration-color: var(--lb-accent-moderate);
+  }
+}
+
+.lb-comment-mention:where([data-self]),
+.lb-composer-mention {
+  padding: 0.1em 0.3em;
+  border-radius: calc(0.675 * var(--lb-radius));
+  background: var(--lb-accent-subtle);
+}
+
+/*************************************
+ *             Composer              *
+ *************************************/
+
+.lb-composer {
+  background: var(--lb-dynamic-background);
+  color: var(--lb-foreground);
+  transition-property: background;
+}
+
+.lb-composer-form {
+  margin: 0;
+}
+
+/**
+ * Progressive enhancement: Use :has instead of :focus-within to target the editor specifically
+ */
+@supports selector(:has(*)) {
+  .lb-composer:where(:has(.lb-composer-editor:not(:focus-visible))) {
+    :where(.lb-button[data-variant="primary"]) {
+      --lb-button-background: var(--lb-foreground-subtle);
+
+      color: var(--lb-foreground-tertiary);
+
+      &:where(:enabled:hover, :enabled:focus-visible) {
+        --lb-button-background: var(--lb-accent);
+
+        color: var(--lb-accent-foreground);
+      }
+    }
+  }
+}
+
+@supports not selector(:has(*)) {
+  .lb-composer:where(:not(:focus-within)) {
+    :where(.lb-button[data-variant="primary"]) {
+      --lb-button-background: var(--lb-foreground-subtle);
+
+      color: var(--lb-foreground-tertiary);
+
+      &:where(:enabled:hover, :enabled:focus-visible) {
+        --lb-button-background: var(--lb-accent);
+
+        color: var(--lb-accent-foreground);
+      }
+    }
+  }
+}
+
+.lb-composer-editor {
+  padding: var(--lb-spacing);
+  outline: none;
+
+  :where([data-placeholder]) {
+    color: var(--lb-foreground-moderate);
+  }
+}
+
+.lb-composer-mention {
+  @include invisible-selection;
+
+  &:where([data-selected]) {
+    background: var(--lb-accent);
+    color: var(--lb-accent-foreground);
+  }
+}
+
+.lb-composer-footer {
+  display: flex;
+  gap: calc(0.75 * var(--lb-spacing));
+  align-items: center;
+  block-size: calc($lb-button-size + var(--lb-spacing));
+  padding: 0 var(--lb-spacing) var(--lb-spacing);
+}
+
+.lb-composer-actions,
+.lb-composer-editor-actions {
+  display: flex;
+  gap: calc(0.125 * var(--lb-spacing));
+  align-items: center;
+}
+
+.lb-composer-editor-actions {
+  margin-inline-end: auto;
+}
+
+.lb-composer-attribution {
+  color: var(--lb-foreground-moderate);
+  outline: none;
+  transition-property: color;
+
+  &:where(:hover, :focus-visible) {
+    color: var(--lb-foreground-tertiary);
+  }
+
+  :where(svg) {
+    block-size: calc(0.75 * $lb-button-size);
+  }
+}
+
+.lb-composer:where(:not([data-collapsed])) {
+  :where(.lb-composer-editor) {
+    padding-block-end: calc(0.875 * var(--lb-spacing));
+  }
+}
+
+/*************************************
+ *              Comment              *
+ *************************************/
+
+.lb-comment {
+  --lb-comment-avatar-size: $lb-button-size;
+
+  position: relative;
+  padding: var(--lb-spacing);
+  background: var(--lb-dynamic-background);
+  color: var(--lb-foreground);
+  font-weight: 400;
+  scroll-margin: var(--lb-spacing);
+
+  @media (hover: hover) {
+    &:where(.lb-comment\:show-actions-hover) {
+      :where(.lb-comment-actions) {
+        position: absolute;
+        inset-inline-end: 0;
+        opacity: 0;
+        transition-property: opacity;
+      }
+
+      &:where(:is(:hover, :focus-within, .lb-comment\:action-open)) {
+        :where(.lb-comment-actions) {
+          position: relative;
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  &:where(:target, [data-target]) {
+    --lb-dynamic-background: var(--lb-background-accent-faint);
+  }
+
+  &:where([data-editing]) {
+    --lb-dynamic-background: var(--lb-background-foreground-faint);
+  }
+}
+
+.lb-comment-header {
+  position: relative;
+  display: flex;
+  gap: calc(0.75 * var(--lb-spacing));
+  align-items: center;
+  block-size: var(--lb-comment-avatar-size);
+  margin-block-end: calc(0.75 * var(--lb-spacing));
+}
+
+.lb-comment-details {
+  display: flex;
+  gap: calc(0.75 * var(--lb-spacing));
+  align-items: center;
+  min-inline-size: 0;
+}
+
+.lb-comment-avatar {
+  flex: none;
+  inline-size: var(--lb-comment-avatar-size);
+}
+
+.lb-comment-details-labels {
+  display: flex;
+  gap: calc(0.5 * var(--lb-spacing));
+  align-items: baseline;
+  min-inline-size: 0;
+}
+
+.lb-comment-author {
+  @include truncate;
+
+  font-weight: 500;
+}
+
+.lb-comment-date {
+  @include truncate;
+
+  color: var(--lb-foreground-tertiary);
+  font-size: 0.875em;
+}
+
+.lb-comment-date-created,
+.lb-comment-date-edited {
+  display: contents;
+}
+
+.lb-comment-actions {
+  display: flex;
+  gap: calc(0.125 * var(--lb-spacing));
+  margin-inline-start: auto;
+}
+
+.lb-comment-composer {
+  margin: calc(-1 * var(--lb-spacing));
+  background: unset;
+}
+
+.lb-comment-body {
+  /**
+   * Prevent empty lines from collapsing
+   */
+  :where(p span:only-child:empty::before) {
+    content: "\FEFF";
+    user-select: none;
+  }
+}
+
+.lb-comment-reactions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(0.375 * var(--lb-spacing));
+  margin-block-start: calc(0.75 * var(--lb-spacing));
+}
+
+.lb-comment-reaction {
+  gap: calc(0.375 * var(--lb-spacing));
+  block-size: $lb-button-size;
+  padding-inline: calc(0.575 * var(--lb-spacing));
+  border-radius: $lb-radius-full;
+
+  &:where([data-self]) {
+    background: var(--lb-accent-subtle);
+    color: var(--lb-accent-secondary);
+    box-shadow: inset 0 0 0 1px var(--lb-accent-moderate);
+
+    &:where(
+        :enabled:hover,
+        :enabled:focus-visible,
+        [aria-expanded="true"],
+        [aria-selected="true"]
+      ) {
+      color: var(--lb-accent);
+    }
+  }
+}
+
+.lb-comment-reaction-count {
+  font-weight: 500;
+  font-size: 0.75em;
+  font-variant-numeric: tabular-nums;
+}
+
+.lb-comment-reaction-tooltip {
+  max-inline-size: 200px;
+}
+
+.lb-comment-deleted {
+  color: var(--lb-foreground-tertiary);
+  font-size: 0.875em;
+}
+
+.lb-comment\:indent-content {
+  min-block-size: calc(var(--lb-comment-avatar-size) + 2 * var(--lb-spacing));
+
+  :where(.lb-comment-header) {
+    block-size: $lb-button-size;
+    margin-block-end: calc(0.25 * var(--lb-spacing));
+  }
+
+  :where(.lb-comment-avatar) {
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+  }
+
+  :where(.lb-comment-details-labels) {
+    margin-inline-start: calc(
+      var(--lb-comment-avatar-size) + 0.75 * var(--lb-spacing)
+    );
+  }
+
+  :where(.lb-comment-content) {
+    padding-inline-start: calc(
+      var(--lb-comment-avatar-size) + 0.75 * var(--lb-spacing)
+    );
+  }
+}
+
+/*************************************
+ *              Thread               *
+ *************************************/
+
+.lb-thread {
+  background: var(--lb-dynamic-background);
+  color: var(--lb-foreground);
+  transition-property: background;
+
+  @media (hover: hover) {
+    &:where(.lb-thread\:show-actions-hover :is(:hover, :focus-within)) {
+      :where(.lb-thread-actions) {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.lb-thread-comments {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.lb-thread-comment {
+  z-index: 0;
+  padding-block: calc(0.6 * var(--lb-spacing));
+  transition-property: background;
+
+  &:where(.lb-comment\:indent-content) {
+    min-block-size: calc(var(--lb-comment-avatar-size) + var(--lb-spacing));
+  }
+
+  &:where(:first-of-type) {
+    padding-block-start: var(--lb-spacing);
+
+    &:where(.lb-comment\:indent-content) {
+      min-block-size: calc(
+        var(--lb-comment-avatar-size) + 1.5 * var(--lb-spacing)
+      );
+    }
+  }
+
+  &:where(:last-of-type) {
+    padding-block-end: var(--lb-spacing);
+
+    &:where(.lb-comment\:indent-content) {
+      min-block-size: calc(
+        var(--lb-comment-avatar-size) + 1.75 * var(--lb-spacing)
+      );
+    }
+  }
+}
+
+.lb-thread-new-indicator {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  block-size: 0;
+
+  &::before,
+  &::after {
+    content: "";
+    z-index: 0;
+    flex: 1;
+    block-size: 0;
+    border-block-start: 1px solid var(--lb-foreground-subtle);
+    transition-property: border;
+  }
+}
+
+.lb-thread-new-indicator-label {
+  z-index: 1;
+  display: flex;
+  flex: none;
+  gap: calc(0.325 * var(--lb-spacing));
+  align-items: center;
+  padding: calc(0.25 * var(--lb-spacing)) var(--lb-spacing);
+  color: var(--lb-accent);
+  font-weight: 600;
+  font-size: 0.675em;
+  text-transform: uppercase;
+}
+
+.lb-thread-new-indicator-label-icon {
+  inline-size: calc(0.6 * var(--lb-icon-size));
+  block-size: calc(0.6 * var(--lb-icon-size));
+}
+
+.lb-thread-composer {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    border-block-start: 1px solid var(--lb-foreground-subtle);
+    pointer-events: none;
+    transition-property: border;
+  }
+}
+
+/*************************************
+ *        Inbox Notification         *
+ *************************************/
+
+.lb-inbox-notification {
+  --lb-inbox-notification-aside-size: 36px;
+
+  position: relative;
+  display: flex;
+  gap: calc(0.75 * var(--lb-spacing));
+  overflow: hidden;
+  padding: var(--lb-spacing);
+  background: var(--lb-dynamic-background);
+  color: var(--lb-foreground);
+  font-weight: 400;
+  text-decoration: inherit;
+  transition-property: background;
+
+  /* Highlight missing notifications during development */
+  &:where([data-missing]) {
+    --lb-accent: var(--lb-destructive) !important;
+    --lb-accent-foreground: var(--lb-destructive-foreground) !important;
+    --lb-accent-contrast: var(--lb-destructive-contrast) !important;
+    --lb-dynamic-background: var(--lb-background-accent-faint);
+  }
+
+  &:where([data-unread]) {
+    --lb-dynamic-background: var(--lb-background-accent-faint);
+  }
+
+  &:where([href]) {
+    cursor: pointer;
+
+    &:where(:hover, :focus-visible, :focus-within) {
+      --lb-dynamic-background: var(--lb-background-foreground-faint);
+    }
+
+    &:where([data-unread]) {
+      &:where(:hover, :focus-visible, :focus-within) {
+        --lb-dynamic-background: var(--lb-background-accent-subtle);
+      }
+    }
+  }
+
+  @media (hover: hover) {
+    &:where(.lb-inbox-notification\:show-actions-hover) {
+      :where(.lb-inbox-notification-header) {
+        display: grid;
+        grid-template: "title secondary" / 1fr max-content;
+      }
+
+      :where(.lb-inbox-notification-details) {
+        opacity: 1;
+        transition-property: opacity;
+      }
+
+      :where(.lb-inbox-notification-actions) {
+        opacity: 0;
+        transition-property: opacity;
+      }
+
+      &:where(:is(:hover, :focus-within, .lb-inbox-notification\:action-open)) {
+        :where(.lb-inbox-notification-details) {
+          opacity: 0;
+        }
+
+        :where(.lb-inbox-notification-actions) {
+          opacity: 1;
+        }
+      }
+
+      :where(.lb-inbox-notification-details),
+      :where(.lb-inbox-notification-actions) {
+        grid-area: secondary;
+        justify-self: end;
+      }
+    }
+  }
+}
+
+.lb-inbox-notification-aside {
+  flex: none;
+  inline-size: var(--lb-inbox-notification-aside-size);
+}
+
+.lb-inbox-notification-icon {
+  display: flex;
+  justify-content: center;
+  place-items: center;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--lb-foreground-subtle);
+
+  .lb-inbox-notification:where([data-missing]) :where(&) {
+    background: var(--lb-accent-subtle);
+    color: var(--lb-accent);
+  }
+}
+
+.lb-inbox-notification-content {
+  flex: 1;
+}
+
+.lb-inbox-notification-content,
+.lb-inbox-notification-body {
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+.lb-inbox-notification-header {
+  display: flex;
+  gap: calc(0.75 * var(--lb-spacing));
+  align-items: center;
+  margin-block-start: calc(0.25 * var(--lb-spacing));
+  margin-block-end: calc(0.5 * var(--lb-spacing));
+}
+
+.lb-inbox-notification-title {
+  min-block-size: $lb-button-size;
+
+  :where(strong, .lb-list, .lb-name) {
+    font-weight: 500;
+  }
+}
+
+.lb-inbox-notification-details {
+  flex: none;
+  align-self: start;
+  min-inline-size: 0;
+  block-size: $lb-button-size;
+  margin-inline-start: auto;
+}
+
+.lb-inbox-notification-details-labels {
+  display: flex;
+  align-items: baseline;
+  min-inline-size: 0;
+
+  &::before {
+    content: "\FEFF";
+  }
+}
+
+.lb-inbox-notification-actions {
+  display: flex;
+  grid-area: actions;
+  gap: calc(0.125 * var(--lb-spacing));
+  align-self: start;
+}
+
+.lb-inbox-notification-comments {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lb-spacing);
+}
+
+.lb-inbox-notification-comment {
+  padding: 0;
+  background: transparent;
+
+  :where(.lb-comment-header) {
+    block-size: auto;
+    color: var(--lb-foreground-tertiary);
+    font-size: 0.875rem;
+  }
+
+  :where(.lb-comment-reaction) {
+    pointer-events: none;
+  }
+}
+
+.lb-inbox-notification-date {
+  color: var(--lb-foreground-tertiary);
+  font-size: 0.875em;
+}
+
+.lb-inbox-notification-unread-indicator {
+  align-self: center;
+  inline-size: 10px;
+  block-size: 10px;
+  margin-inline-start: calc(0.5 * var(--lb-spacing));
+  border-radius: 50%;
+  background: var(--lb-accent);
+}
+
+/*************************************
+ *      Inbox Notification List      *
+ *************************************/
+
+.lb-inbox-notification-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.lb-inbox-notification-list-item {
+  &:where(:not(:last-of-type)) {
+    border-block-end: 1px solid var(--lb-foreground-subtle);
+  }
+}
+
+/*************************************
+ *            Inline code            *
+ *************************************/
+
+:is(.lb-root) {
+  :where(code) {
+    padding: 0.2em 0.4em;
+    border-radius: calc(0.75 * var(--lb-radius));
+    background: var(--lb-foreground-subtle);
+    box-decoration-break: clone;
+    font-size: 85%;
+    line-height: 1;
+  }
+
+  /**
+   * Progressive enhancement: Merge adjacent inline code elements
+   */
+  :where(span:has(code) + span code) {
+    padding-inline-start: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  :where(span:has(code):has(+ span code) code) {
+    padding-inline-end: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+}
+
+/* 0,0,0 specificity to inherit any styles applied to `code` elements */
+:where(:is(.lb-root) code) {
+  font-family: ui-monospace, Menlo, Monaco, "Roboto Mono", "Cascadia Code",
+    "Source Code Pro", Consolas, "DejaVu Sans Mono", monospace;
+}
+
+/*************************************
+ *             Elevation             *
+ *************************************/
+
+.lb-elevation {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--lb-radius);
+  background: var(--lb-dynamic-background);
+  box-shadow: var(--lb-elevation-shadow);
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    box-shadow: var(--lb-inset-shadow);
+    pointer-events: none;
+  }
+}
+
+/*************************************
+ *          Elevation lists          *
+ *************************************/
+
+.lb-dropdown,
+.lb-composer-suggestions {
+  padding: $lb-elevation-list-padding;
+}
+
+.lb-dropdown-item,
+.lb-composer-suggestions-list-item {
+  display: flex;
+  align-items: center;
+  padding: calc(0.25 * var(--lb-spacing)) calc(0.5 * var(--lb-spacing));
+  font-size: 0.875rem;
+}
+
+.lb-dropdown-item,
+.lb-composer-suggestions-list-item,
+.lb-emoji-picker-emoji {
+  border-radius: calc(var(--lb-radius) - 0.75 * $lb-elevation-list-padding);
+  color: var(--lb-foreground-secondary);
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+  transition-property: background, color, opacity;
+}
+
+:is(
+    .lb-dropdown-item,
+    .lb-composer-suggestions-list-item,
+    .lb-emoji-picker-emoji
+  ) {
+  &:where([data-highlighted], [data-selected]) {
+    background: var(--lb-foreground-subtle);
+    transition-duration: calc(var(--lb-transition-duration) / 2);
+  }
+
+  &:where(:disabled, [data-disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+/*************************************
+ *        Floating animations        *
+ *************************************/
+
+.lb-dropdown,
+.lb-composer-suggestions,
+.lb-tooltip,
+.lb-emoji-picker {
+  animation-duration: var(--lb-transition-duration);
+  animation-timing-function: var(--lb-transition-easing);
+  will-change: transform, opacity;
+}
+
+:is(
+    .lb-dropdown,
+    .lb-emoji-picker,
+    .lb-tooltip:where([data-state="delayed-open"]),
+    .lb-composer-suggestions
+  ) {
+  &:where([data-side="top"]) {
+    animation-name: lb-animation-slide-up;
+  }
+
+  &:where([data-side="bottom"]) {
+    animation-name: lb-animation-slide-down;
+  }
+}
+
+:is(.lb-dropdown, .lb-emoji-picker, .lb-tooltip, .lb-composer-suggestions) {
+  &:where([data-state="closed"]) {
+    animation-name: lb-animation-disappear;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .lb-dropdown:where(:not([data-state="closed"])),
+  .lb-emoji-picker:where(:not([data-state="closed"])),
+  .lb-tooltip:where([data-state="delayed-open"]:not([data-state="closed"])),
+  .lb-composer-suggestions:where(:not([data-state="closed"])) {
+    animation-name: lb-animation-appear;
+  }
+}
+
+/*************************************
+ *            Animations             *
+ *************************************/
+
+@keyframes lb-animation-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes lb-animation-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes lb-animation-appear {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes lb-animation-disappear {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes lb-animation-shimmer {
+  from,
+  to {
+    mask-image: linear-gradient(
+      90deg,
+      rgb(0 0 0 / 50%),
+      #000,
+      #000,
+      rgb(0 0 0 / 50%)
+    );
+    mask-size: 400% 100%;
+  }
+
+  from {
+    mask-position: 200% 0;
+  }
+
+  to {
+    mask-position: -200% 0;
+  }
+}