@dialpad/dialtone 9.86.2 → 9.87.0

package/dist/css/dialtone-default-theme.css

@@ -998,8 +998,8 @@ template {
   border-radius: var(--dt-size-radius-pill);
   box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
 }
-.dt-recipe-leftbar-row--selected .d-avatar__count,
-.dt-recipe-leftbar-row__primary:hover .d-avatar__count {
+.d-recipe-leftbar-row--selected .d-avatar__count,
+.d-recipe-leftbar-row__primary:hover .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
 }
 .d-avatar--clickable {
@@ -4761,10 +4761,10 @@ legend .d-label--md {
   border-width: var(--presence-border-size);
   border-radius: var(--dt-size-radius-circle);
 }
-.dt-recipe-leftbar-row--selected .d-presence {
+.d-recipe-leftbar-row--selected .d-presence {
   --presence-color-border-base: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-recipe-leftbar-row__primary:hover .d-presence {
+.d-recipe-leftbar-row__primary:hover .d-presence {
   --presence-color-border-base: var(--dt-theme-sidebar-row-color-background-hover);
 }
 .d-presence__inner {
@@ -7997,22 +7997,22 @@ ul {
 .d-fvn-unset {
   font-variant-numeric: unset !important;
 }
-.dt-recipe-attachment-carousel {
+.d-recipe-attachment-carousel {
   position: relative;
   width: var(--dt-space-1000);
   max-height: 100px;
   /* stylelint-disable-line meowtec/no-px */
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__media-list {
+.d-recipe-attachment-carousel__media-list {
   display: flex;
   flex-direction: row;
   padding-left: 0;
   overflow-x: scroll;
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__media-list::-webkit-scrollbar {
+.d-recipe-attachment-carousel__media-list::-webkit-scrollbar {
   display: none;
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__arrow {
+.d-recipe-attachment-carousel__arrow {
   position: absolute;
   top: var(--dt-space-30-percent);
   background-color: var(--dt-color-neutral-white);
@@ -8021,19 +8021,19 @@ ul {
   border-width: var(--dt-size-100);
   opacity: 0;
 }
-.dt-recipe-attachment-carousel:hover .dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__arrow {
+.d-recipe-attachment-carousel:hover .d-recipe-attachment-carousel__arrow {
   opacity: 1;
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__arrow .dt-recipe-attachment-carousel__arrow--left {
+.d-recipe-attachment-carousel__arrow--left {
   left: var(--dt-space-300);
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__arrow .dt-recipe-attachment-carousel__arrow--right {
+.d-recipe-attachment-carousel__arrow--right {
   right: var(--dt-space-300);
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image {
+.d-recipe-attachment-carousel__image {
   position: relative;
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image .dt-recipe-attachment-carousel__image__close-button {
+.d-recipe-attachment-carousel__image-close-button {
   position: absolute;
   top: inherit;
   right: inherit;
@@ -8044,11 +8044,11 @@ ul {
   border-width: var(--dt-size-200);
   opacity: 0;
 }
-.dt-recipe-attachment-carousel__image:focus-within .dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image .dt-recipe-attachment-carousel__image__close-button,
-.dt-recipe-attachment-carousel__image:hover .dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image .dt-recipe-attachment-carousel__image__close-button {
+.d-recipe-attachment-carousel__image:focus-within .d-recipe-attachment-carousel__image-close-button,
+.d-recipe-attachment-carousel__image:hover .d-recipe-attachment-carousel__image-close-button {
   opacity: 1;
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image .dt-recipe-attachment-carousel__image__viewer {
+.d-recipe-attachment-carousel__image-viewer {
   width: var(--dt-size-700);
   height: var(--dt-size-700);
   -o-object-fit: cover;
@@ -8058,12 +8058,12 @@ ul {
   border-width: var(--dt-size-350);
   border-radius: var(--br4);
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image .dt-recipe-attachment-carousel__image__top-right {
+.d-recipe-attachment-carousel__image-top-right {
   position: absolute;
   top: var(--dt-size-100);
   right: var(--dt-size-100);
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__image .dt-recipe-attachment-carousel__image__progress-bar {
+.d-recipe-attachment-carousel__image-progress-bar {
   position: absolute;
   top: inherit;
   right: inherit;
@@ -8076,49 +8076,49 @@ ul {
   -webkit-transform: rotate(-90deg);
           transform: rotate(-90deg);
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__progress-bar {
+.d-recipe-attachment-carousel__progress-bar {
   width: var(--dt-size-550);
   height: var(--dt-size-550);
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__progress-bar .dt-recipe-attachment-carousel__progress-bar__circle {
+.d-recipe-attachment-carousel__progress-bar-circle {
   fill: none;
   stroke-width: 2;
   stroke-dasharray: var(--stroke-dasharray);
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__progress-bar .dt-recipe-attachment-carousel__progress-bar__circle:nth-child(1) {
+.d-recipe-attachment-carousel__progress-bar-circle:nth-child(1) {
   stroke: var(--dt-color-black-100);
   stroke-dashoffset: 0;
 }
-.dt-recipe-attachment-carousel .dt-recipe-attachment-carousel__progress-bar .dt-recipe-attachment-carousel__progress-bar__circle:nth-child(2) {
+.d-recipe-attachment-carousel__progress-bar-circle:nth-child(2) {
   transition: stroke-dashoffset 500ms linear;
   stroke: var(--dt-color-purple-500);
   stroke-dashoffset: var(--stroke-dashoffset);
 }
-.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle) {
+.d-recipe-callbar-button:not(.d-recipe-callbar-button--circle) {
   line-height: var(--dt-font-line-height-300);
 }
-.dt-recipe-callbar-button .dt-recipe-callbar-button.d-btn[disabled] {
+.d-recipe-callbar-button.d-btn[disabled] {
   background-color: unset;
   opacity: 0.5;
 }
-.dt-recipe-callbar-button--active .base-button__icon,
-.dt-recipe-callbar-button--active:hover .base-button__icon {
-  color: var(--primary-color);
+.d-recipe-callbar-button--active .base-button__icon,
+.d-recipe-callbar-button--active:hover .base-button__icon {
+  color: var(--dt-theme-mention-color-background);
 }
-.dt-recipe-callbar-button--disabled {
+.d-recipe-callbar-button--disabled {
   cursor: not-allowed;
 }
-.dt-recipe-callbar-button--circle {
+.d-recipe-callbar-button--circle {
   border-radius: var(--dt-size-radius-circle);
 }
-.dt-recipe-callbar-button--circle.d-btn[disabled] {
+.d-recipe-callbar-button--circle.d-btn[disabled] {
   border-color: unset;
 }
-.dt-recipe-callbar-button-with-popover {
+.d-recipe-callbar-button-with-popover {
   display: flex;
   align-items: flex-start;
 }
-.dt-recipe-callbar-button-with-popover__arrow {
+.d-recipe-callbar-button-with-popover__arrow {
   width: var(--dt-size-500);
   height: var(--dt-size-500);
   margin-top: var(--dt-space-450);
@@ -8126,80 +8126,80 @@ ul {
   padding: var(--dt-space-400);
   border-radius: var(--dt-size-300);
 }
-.dt-recipe-callbar-button-with-popover__arrow .d-btn--active {
+.d-recipe-callbar-button-with-popover__arrow .d-btn--active {
   background: var(--dt-color-surface-moderate-opaque);
 }
-.dt-recipe-callbar-button-with-popover__arrow--large {
+.d-recipe-callbar-button-with-popover__arrow--large {
   margin-left: var(--dt-space-550-negative);
 }
-.dt-recipe-callbar-button-with-popover__arrow-icon {
+.d-recipe-callbar-button-with-popover__arrow-icon {
   color: var(--dt-color-black-800);
 }
-.dt-recipe-callbar-button-with-popover__popover .d-popover__header {
+.d-recipe-callbar-button-with-popover__popover .d-popover__header {
   color: var(--dt-color-foreground-primary-inverted);
   background: var(--dt-color-surface-contrast);
 }
-.dt-recipe-callbar-button-with-popover__popover .d-popover__header .d-btn {
+.d-recipe-callbar-button-with-popover__popover .d-popover__header .d-btn {
   color: var(--dt-color-foreground-primary-inverted);
 }
-.dt-recipe-callbar-button-with-popover__button.d-tab--selected::after,
-.dt-recipe-callbar-button-with-popover__button.d-tab--selected:hover::after {
+.d-recipe-callbar-button-with-popover__button.d-tab--selected::after,
+.d-recipe-callbar-button-with-popover__button.d-tab--selected:hover::after {
   --tab--bgc: var(--dt-color-surface-contrast);
 }
-.dt-recipe-callbar-button-with-popover__button.tab-group {
+.d-recipe-callbar-button-with-popover__button.tab-group {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-.dt-recipe-callbar-button-with-popover__button.tab-content {
+.d-recipe-callbar-button-with-popover__button.tab-content {
   flex: 1 1 100%;
   overflow-y: auto;
 }
-.dt-recipe-callbox {
+.d-recipe-callbox {
   padding: 0;
   color: var(--dt-color-foreground-primary);
   background-color: var(--dt-color-surface-primary);
   border-radius: var(--dt-size-radius-300);
 }
-.dt-recipe-callbox__video {
+.d-recipe-callbox__video {
   display: flex;
   margin-bottom: var(--dt-space-300-negative);
   overflow: clip;
   border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;
 }
-.dt-recipe-callbox__main-content {
+.d-recipe-callbox__main-content {
   align-items: stretch;
   padding: 0;
   border: var(--dt-size-border-100) solid transparent;
   border-radius: var(--dt-size-radius-300);
 }
-.dt-recipe-callbox__main-content.dt-recipe-callbox__border-default {
+.d-recipe-callbox__main-content.d-recipe-callbox__border-default {
   border-color: var(--dt-color-border-default);
 }
-.dt-recipe-callbox__main-content.dt-recipe-callbox__border-ai {
+.d-recipe-callbox__main-content.d-recipe-callbox__border-ai {
   background: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box, linear-gradient(135deg, var(--dt-color-border-accent), var(--dt-color-border-brand)) border-box;
 }
-.dt-recipe-callbox__main-content.dt-recipe-callbox__border-critical {
+.d-recipe-callbox__main-content.d-recipe-callbox__border-critical {
   background: radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box, radial-gradient(circle, #E7301D, #F78B23) border-box;
 }
-.dt-recipe-callbox__main-content-top {
+.d-recipe-callbox__main-content-top {
   display: flex;
   align-items: center;
   padding: var(--dt-space-350) var(--dt-space-400);
 }
-.dt-recipe-callbox__main-content-bottom {
+.d-recipe-callbox__main-content-bottom {
   border-top: 1px solid var(--dt-color-border-subtle);
 }
-.dt-recipe-callbox__avatar {
+.d-recipe-callbox__avatar {
   margin-right: var(--dt-space-400);
 }
-.dt-recipe-callbox__content {
+.d-recipe-callbox__content {
   display: flex;
   flex: 1 0 auto;
   flex-direction: column;
   min-width: 0;
 }
-.dt-recipe-callbox__content-title {
+.d-recipe-callbox__content-title {
   width: 0;
   min-width: 100%;
   padding: 0;
@@ -8216,10 +8216,10 @@ ul {
       -ms-user-select: text;
           user-select: text;
 }
-.dt-recipe-callbox__content-badge {
+.d-recipe-callbox__content-badge {
   line-height: normal;
 }
-.dt-recipe-callbox__content-subtitle {
+.d-recipe-callbox__content-subtitle {
   width: 0;
   min-width: 100%;
   padding: 0;
@@ -8228,36 +8228,36 @@ ul {
   font-size: var(--dt-font-size-100);
   line-height: normal;
 }
-.dt-recipe-callbox__right {
+.d-recipe-callbox__right {
   display: flex;
   justify-content: right;
 }
-.dt-recipe-callbox--clickable .dt-recipe-callbox__content-title {
+.d-recipe-callbox--clickable .d-recipe-callbox__content-title {
   border-radius: var(--dt-size-100);
   cursor: pointer;
   -webkit-user-select: none;
       -ms-user-select: none;
           user-select: none;
 }
-.dt-recipe-callbox--clickable .dt-recipe-callbox__content-title:focus-visible {
+.d-recipe-callbox--clickable .d-recipe-callbox__content-title:focus-visible {
   outline: none;
   box-shadow: var(--dt-shadow-focus);
 }
-.dt-recipe-callbox--clickable .dt-recipe-callbox__content-title:hover,
-.dt-recipe-callbox--clickable .dt-recipe-callbox__content-title:active {
+.d-recipe-callbox--clickable .d-recipe-callbox__content-title:hover,
+.d-recipe-callbox--clickable .d-recipe-callbox__content-title:active {
   text-decoration: underline;
 }
-.dt-recipe-callbox__badge--warning {
+.d-recipe-callbox__badge--warning {
   background-color: var(--dt-color-surface-warning);
 }
-.dt-recipe-combobox-multi-select__chip {
+.d-recipe-combobox-multi-select__chip {
   z-index: var(--zi-base1);
   max-width: var(--dt-size-100-percent);
   margin-top: var(--dt-space-300);
   margin-right: var(--dt-space-200);
   margin-left: var(--dt-space-200);
 }
-.dt-recipe-combobox-multi-select__chip-wrapper {
+.d-recipe-combobox-multi-select__chip-wrapper {
   position: absolute;
   max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));
   max-height: initial;
@@ -8266,45 +8266,45 @@ ul {
   padding-left: var(--dt-space-100);
   overflow-y: visible;
 }
-.dt-recipe-combobox-multi-select__chip-wrapper-md--collapsed {
+.d-recipe-combobox-multi-select__chip-wrapper-md--collapsed {
   max-height: 2.8rem;
   overflow-y: hidden;
 }
-.dt-recipe-combobox-multi-select__chip-wrapper-sm--collapsed,
-.dt-recipe-combobox-multi-select__chip-wrapper-xs--collapsed {
+.d-recipe-combobox-multi-select__chip-wrapper-sm--collapsed,
+.d-recipe-combobox-multi-select__chip-wrapper-xs--collapsed {
   max-height: 2.5rem;
   overflow-y: hidden;
 }
-.dt-recipe-combobox-multi-select__chip--truncate {
+.d-recipe-combobox-multi-select__chip--truncate {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.dt-recipe-combobox-multi-select__input {
+.d-recipe-combobox-multi-select__input {
   flex-grow: 1;
 }
-.dt-recipe-combobox-multi-select__input-wrapper {
+.d-recipe-combobox-multi-select__input-wrapper {
   position: relative;
   display: block;
 }
-.dt-recipe-combobox-multi-select__list--loading {
+.d-recipe-combobox-multi-select__list--loading {
   padding-top: var(--dt-space-500);
   padding-bottom: var(--dt-space-500);
   text-align: center;
 }
-.dt-recipe-contact-info {
+.d-recipe-contact-info {
   --contact-info-avatar-border-color: var(--dt-color-surface-primary);
   display: flex;
 }
-.dt-recipe-contact-info .d-item-layout {
+.d-recipe-contact-info .d-item-layout {
   flex: 1 1 0;
 }
-.dt-recipe-contact-info .d-item-layout--content {
+.d-recipe-contact-info .d-item-layout--content {
   /*
     DP-74536: Add `min-width` to make the width of "contact info" adjustable.
     */
   min-width: var(--dt-space-825);
 }
-.dt-recipe-contact-info .d-item-layout--left {
+.d-recipe-contact-info .d-item-layout--left {
   align-items: center;
   justify-content: flex-start;
   /*
@@ -8312,48 +8312,48 @@ ul {
     */
   min-width: var(--dt-space-650);
 }
-.dt-recipe-contact-info .d-item-layout--right {
+.d-recipe-contact-info .d-item-layout--right {
   align-items: center;
   /*
     DP-74536: Remove `min-width` which cause extra unused empty space on the right of "contact info".
     */
   min-width: 0;
 }
-.dt-recipe-contact-info__left {
+.d-recipe-contact-info__left {
   position: relative;
   background-color: transparent;
   background-image: none;
   border-width: 0;
   cursor: pointer;
 }
-.dt-recipe-contact-info__avatars {
+.d-recipe-contact-info__avatars {
   display: flex;
   flex-direction: row;
   margin-right: var(--dt-space-300-negative);
 }
-.dt-recipe-contact-info__avatars .d-avatar {
+.d-recipe-contact-info__avatars .d-avatar {
   box-sizing: unset;
   border: var(--dt-size-300) solid var(--contact-info-avatar-border-color);
   border-radius: var(--dt-size-radius-pill);
 }
-.dt-recipe-editor__top-bar-background {
+.d-recipe-editor__top-bar-background {
   background-color: var(--dt-color-surface-secondary);
 }
-.dt-recipe-editor__button-group-divider {
+.d-recipe-editor__button-group-divider {
   width: var(--dt-size-100);
   height: calc(var(--dt-size-550) + var(--dt-size-300));
   margin-left: var(--dt-space-400);
   background: var(--dt-color-border-subtle);
 }
-.dt-recipe-emoji-row {
+.d-recipe-emoji-row {
   display: flex;
   flex-wrap: wrap;
   gap: var(--dt-space-300);
 }
-.dt-recipe-emoji-row__tooltip {
+.d-recipe-emoji-row__tooltip {
   display: inline-block;
 }
-.dt-recipe-emoji-row__reaction {
+.d-recipe-emoji-row__reaction {
   --emoji-item-color-inset-shadow: transparent;
   --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);
   --emoji-item-color-background: var(--dt-action-color-background-muted-hover);
@@ -8365,51 +8365,51 @@ ul {
   border-radius: var(--dt-size-radius-pill);
   box-shadow: inset 0 0 0 var(--dt-size-border-100) var(--emoji-item-color-inset-shadow);
 }
-.dt-recipe-emoji-row__reaction.dt-recipe-emoji-row__picker {
+.d-recipe-emoji-row__reaction.d-recipe-emoji-row__picker {
   padding: var(--dt-space-200) var(--dt-space-350);
 }
-.dt-recipe-emoji-row__reaction:hover {
+.d-recipe-emoji-row__reaction:hover {
   --emoji-item-color-inset-shadow: var(--dt-color-border-subtle);
   --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover);
 }
-.dt-recipe-emoji-row__reaction:active {
+.d-recipe-emoji-row__reaction:active {
   --emoji-item-color-background: var(--dt-action-color-background-muted-active);
   --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-active);
   -webkit-transform: scale(0.98);
           transform: scale(0.98);
 }
-.dt-recipe-emoji-row__reaction--selected {
+.d-recipe-emoji-row__reaction--selected {
   --emoji-item-color-inset-shadow: var(--dt-color-border-brand);
   --emoji-item-color-foreground: var(--dt-color-link-primary);
   --emoji-item-color-background: var(--dt-action-color-background-base-hover);
 }
-.dt-recipe-emoji-row__reaction--selected .dt-recipe-emoji-row__reaction-number {
+.d-recipe-emoji-row__reaction--selected .d-recipe-emoji-row__reaction-number {
   font-weight: var(--dt-font-weight-bold);
 }
-.dt-recipe-emoji-row__reaction--selected:hover {
+.d-recipe-emoji-row__reaction--selected:hover {
   --emoji-item-color-inset-shadow: var(--dt-color-border-brand-strong);
   --emoji-item-color-foreground: var(--dt-color-link-primary-hover);
 }
-.dt-recipe-emoji-row__reaction--selected:active {
+.d-recipe-emoji-row__reaction--selected:active {
   --emoji-item-color-background: var(--dt-action-color-background-base-active);
 }
-.dt-recipe-emoji-row__reaction-number {
+.d-recipe-emoji-row__reaction-number {
   font-weight: var(--dt-typography-body-sm-font-weight);
   font-size: var(--dt-typography-body-sm-font-size);
   font-family: var(--dt-typography-body-sm-font-family);
   font-variant: tabular-nums;
   line-height: var(--dt-font-line-height-100);
 }
-.dt-recipe-emoji-row__emoji {
+.d-recipe-emoji-row__emoji {
   display: inline-flex;
   margin-right: var(--dt-space-300);
 }
-.dt-recipe-feed-item-pill__wrapper {
+.d-recipe-feed-item-pill__wrapper {
   padding: var(--dt-space-400);
   background-color: var(--dt-color-surface-secondary);
 }
-.dt-recipe-feed-item-pill__button {
-  width: 100%;
+.d-recipe-feed-item-pill__button {
+  width: var(--dt-size-100-percent);
   text-align: left;
   background-color: var(--dt-color-surface-moderate);
   border-width: 0;
@@ -8420,46 +8420,46 @@ ul {
   --button-color-text: var(--dt-action-color-foreground-muted-default);
   --button-border-radius: var(--dt-size-radius-600);
 }
-.dt-recipe-feed-item-pill__layout {
+.d-recipe-feed-item-pill__layout {
   gap: var(--dt-space-300);
-  width: 100%;
+  width: var(--dt-size-100-percent);
   padding: var(--dt-space-400);
 }
-.dt-recipe-feed-item-pill__layout > .d-item-layout--left {
+.d-recipe-feed-item-pill__layout > .d-item-layout--left {
   justify-content: center;
   padding-right: var(--dt-space-0);
 }
-.dt-recipe-feed-item-pill__icon {
+.d-recipe-feed-item-pill__icon {
   display: flex;
 }
-.dt-recipe-feed-item-pill__icon svg {
-  -webkit-animation: fade 0.15s ease-in;
-          animation: fade 0.15s ease-in;
+.d-recipe-feed-item-pill__icon svg {
+  -webkit-animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
+          animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
 }
-.dt-recipe-feed-item-pill__content {
+.d-recipe-feed-item-pill__content {
   display: flex;
   justify-content: center;
 }
-.dt-recipe-feed-item-pill__title {
+.d-recipe-feed-item-pill__title {
   font-weight: var(--dt-font-weight-bold);
 }
-.dt-recipe-feed-item-pill__border {
+.d-recipe-feed-item-pill__border {
   overflow: hidden;
   background-clip: content-box, border-box;
   background-origin: border-box;
-  border: double 1px transparent;
+  border: double var(--dt-size-100) transparent;
   border-radius: var(--dt-size-radius-600);
 }
-.dt-recipe-feed-item-pill__border--default {
+.d-recipe-feed-item-pill__border--default {
   background: var(--dt-color-border-default);
 }
-.dt-recipe-feed-item-pill__border--ai {
+.d-recipe-feed-item-pill__border--ai {
   background-image: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)), var(--dt-badge-color-background-ai);
 }
-.dt-recipe-feed-item-pill__border--critical {
+.d-recipe-feed-item-pill__border--critical {
   background: var(--dt-color-foreground-critical);
 }
-@-webkit-keyframes fade {
+@-webkit-keyframes d-recipe-feed-item-pill-fade {
   0% {
     -webkit-transform: scale(0);
             transform: scale(0);
@@ -8469,7 +8469,7 @@ ul {
             transform: scale(1);
   }
 }
-@keyframes fade {
+@keyframes d-recipe-feed-item-pill-fade {
   0% {
     -webkit-transform: scale(0);
             transform: scale(0);
@@ -8479,21 +8479,21 @@ ul {
             transform: scale(1);
   }
 }
-.dt-recipe-feed-item-row {
+.d-recipe-feed-item-row {
   position: relative;
   box-sizing: border-box;
   width: var(--dt-size-100-percent);
   padding: var(--dt-space-300) var(--dt-space-500);
 }
-.dt-recipe-feed-item-row:focus-visible {
+.d-recipe-feed-item-row:focus-visible {
   box-shadow: var(--dt-shadow-focus-inset);
 }
-.dt-recipe-feed-item-row > .d-item-layout {
+.d-recipe-feed-item-row > .d-item-layout {
   min-height: initial;
   padding: 0;
   font: var(--dt-typography-body-md-compact);
 }
-.dt-recipe-feed-item-row > .d-item-layout > .d-item-layout--left {
+.d-recipe-feed-item-row > .d-item-layout > .d-item-layout--left {
   display: block;
   align-self: flex-start;
   min-width: calc(var(--dt-space-600) + var(--dt-space-300));
@@ -8501,39 +8501,39 @@ ul {
   padding-left: var(--dt-space-0);
   text-align: end;
 }
-.dt-recipe-feed-item-row > .d-item-layout > .d-item-layout--right {
+.d-recipe-feed-item-row > .d-item-layout > .d-item-layout--right {
   min-width: initial;
   padding: 0;
 }
-.dt-recipe-feed-item-row > .d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
+.d-recipe-feed-item-row > .d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
   display: flex;
   flex-direction: column;
   margin-top: 0;
 }
-.dt-recipe-feed-item-row__state--searched {
+.d-recipe-feed-item-row__state--searched {
   background-color: var(--dt-color-surface-warning-subtle);
 }
-.dt-recipe-feed-item-row__state--error {
+.d-recipe-feed-item-row__state--error {
   background-color: var(--dt-color-surface-critical-subtle);
 }
-.dt-recipe-feed-item-row__state-transition {
+.d-recipe-feed-item-row__state-transition {
   transition: background-color 2s var(--ttf-in-out) 0s;
 }
-.dt-recipe-feed-item-row--active {
+.d-recipe-feed-item-row--active {
   background-color: var(--dt-color-surface-secondary-opaque);
 }
-.dt-recipe-feed-item-row__avatar-container {
+.d-recipe-feed-item-row__avatar-container {
   padding-top: var(--dt-space-300);
   padding-bottom: var(--dt-space-300);
 }
-.dt-recipe-feed-item-row__content {
+.d-recipe-feed-item-row__content {
   padding-left: var(--dt-space-300);
 }
-.dt-recipe-feed-item-row__attachment {
+.d-recipe-feed-item-row__attachment {
   padding-top: var(--dt-space-200);
   padding-bottom: var(--dt-space-300);
 }
-.dt-recipe-feed-item-row__image {
+.d-recipe-feed-item-row__image {
   display: block;
   min-width: 5.6rem;
   max-width: 30rem;
@@ -8542,11 +8542,11 @@ ul {
   border: var(--dt-color-border-subtle) solid var(--dt-size-border-100);
   border-radius: var(--dt-size-radius-400);
 }
-.dt-recipe-feed-item-row__video {
+.d-recipe-feed-item-row__video {
   display: block;
   height: 25rem;
 }
-.dt-recipe-feed-item-row__header {
+.d-recipe-feed-item-row__header {
   display: flex;
   flex-wrap: wrap;
   gap: var(--dt-space-300);
@@ -8554,59 +8554,59 @@ ul {
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
 }
-.dt-recipe-feed-item-row__header-name {
+.d-recipe-feed-item-row__header-name {
   font-weight: var(--dt-font-weight-bold);
 }
-.dt-recipe-feed-item-row__header-time {
+.d-recipe-feed-item-row__header-time {
   flex-shrink: 0;
   color: var(--dt-color-foreground-tertiary);
   font-size: var(--dt-font-size-100);
 }
-.dt-recipe-feed-item-row__reactions {
+.d-recipe-feed-item-row__reactions {
   display: flex;
   flex-wrap: wrap;
   padding-top: var(--dt-space-200);
   padding-bottom: var(--dt-space-200);
   padding-left: var(--dt-space-300);
 }
-.dt-recipe-feed-item-row__threading {
+.d-recipe-feed-item-row__threading {
   padding-top: var(--dt-space-200);
   padding-bottom: var(--dt-space-200);
 }
-.dt-recipe-feed-item-row__left-time {
+.d-recipe-feed-item-row__left-time {
   color: var(--dt-color-foreground-tertiary);
   font-weight: var(--dt-font-weight-normal);
   font-size: var(--dt-font-size-100);
   white-space: nowrap;
   vertical-align: middle;
 }
-.dt-recipe-feed-item-row__menu {
+.d-recipe-feed-item-row__menu {
   position: absolute;
   top: var(--dt-space-550-negative);
   right: var(--dt-space-450);
 }
-.dt-recipe-grouped-chip {
+.d-recipe-grouped-chip {
   display: inline-flex;
   white-space: nowrap;
   background-color: unset;
   background-image: unset;
 }
-.dt-recipe-grouped-chip__content {
+.d-recipe-grouped-chip__content {
   font-variant-numeric: tabular-nums;
 }
-.dt-recipe-grouped-chip__content-left {
+.d-recipe-grouped-chip__content-left {
   max-width: var(--dt-size-730);
   background-color: var(--dt-color-surface-moderate-opaque);
   border-top-left-radius: var(--dt-size-radius-pill);
   border-bottom-left-radius: var(--dt-size-radius-pill);
 }
-.dt-recipe-grouped-chip__content-right {
+.d-recipe-grouped-chip__content-right {
   max-width: var(--dt-size-730);
   background-color: var(--dt-color-purple-200);
   border-top-right-radius: var(--dt-size-radius-pill);
   border-bottom-right-radius: var(--dt-size-radius-pill);
 }
-.dt-recipe-ivr-node {
+.d-recipe-ivr-node {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -8614,22 +8614,22 @@ ul {
   /* stylelint-disable-line meowtec/no-px */
   cursor: pointer;
 }
-.dt-recipe-ivr-node__header-left {
+.d-recipe-ivr-node__header-left {
   display: flex;
   align-items: center;
 }
-.dt-recipe-ivr-node__label {
+.d-recipe-ivr-node__label {
   font-weight: var(--dt-font-weight-bold);
   font-size: var(--dt-font-size-200);
 }
-.dt-recipe-ivr-node__dropdown-list {
+.d-recipe-ivr-node__dropdown-list {
   width: var(--dt-size-825);
 }
-.dt-recipe-ivr-node__goto-icon {
+.d-recipe-ivr-node__goto-icon {
   -webkit-transform: rotate(90deg);
           transform: rotate(90deg);
 }
-.dt-recipe-ivr-node__connector {
+.d-recipe-ivr-node__connector {
   z-index: var(--zi-base);
   display: flex;
   align-items: center;
@@ -8641,20 +8641,20 @@ ul {
   border-color: var(--dt-color-purple-600);
   border-radius: var(--dt-size-radius-circle);
 }
-.dt-recipe-ivr-node__connector--selected {
+.d-recipe-ivr-node__connector--selected {
   margin-bottom: var(--dt-space-400-negative);
 }
-.dt-recipe-ivr-node__connector-dtmf {
+.d-recipe-ivr-node__connector-dtmf {
   width: var(--dt-size-550);
   height: var(--dt-size-550);
   margin-bottom: var(--dt-space-450-negative);
   color: var(--dt-color-neutral-white);
   font-size: var(--dt-font-size-200);
 }
-.dt-recipe-ivr-node__connector-dtmf .dt-recipe-ivr-node__connector--selected {
+.d-recipe-ivr-node__connector-dtmf .d-recipe-ivr-node__connector--selected {
   margin-bottom: var(--dt-space-500-negative);
 }
-.dt-recipe-leftbar-row {
+.d-recipe-leftbar-row {
   --leftbar-row-color-foreground: var(--dt-theme-sidebar-color-foreground);
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background);
   --leftbar-row-radius: var(--dt-size-radius-pill);
@@ -8685,31 +8685,31 @@ ul {
   transition-duration: var(--td200);
   transition-property: background-color, border, box-shadow;
 }
-.dt-recipe-leftbar-row:not(.dt-recipe-leftbar-row--no-action):hover,
-.dt-recipe-leftbar-row:not(.dt-recipe-leftbar-row--no-action):focus-within {
+.d-recipe-leftbar-row:not(.d-recipe-leftbar-row--no-action):hover,
+.d-recipe-leftbar-row:not(.d-recipe-leftbar-row--no-action):focus-within {
   --leftbar-row-unread-badge-display: none;
 }
-.dt-recipe-leftbar-row:not(.dt-recipe-leftbar-row--no-action):hover .dt-recipe-leftbar-row__action,
-.dt-recipe-leftbar-row:not(.dt-recipe-leftbar-row--no-action):focus-within .dt-recipe-leftbar-row__action {
+.d-recipe-leftbar-row:not(.d-recipe-leftbar-row--no-action):hover .d-recipe-leftbar-row__action,
+.d-recipe-leftbar-row:not(.d-recipe-leftbar-row--no-action):focus-within .d-recipe-leftbar-row__action {
   display: inline-flex;
 }
-.dt-recipe-leftbar-row:not(.dt-recipe-leftbar-row--no-action):hover .dt-recipe-leftbar-row__action-button,
-.dt-recipe-leftbar-row:not(.dt-recipe-leftbar-row--no-action):focus-within .dt-recipe-leftbar-row__action-button {
+.d-recipe-leftbar-row:not(.d-recipe-leftbar-row--no-action):hover .d-recipe-leftbar-row__action-button,
+.d-recipe-leftbar-row:not(.d-recipe-leftbar-row--no-action):focus-within .d-recipe-leftbar-row__action-button {
   opacity: 1;
 }
-.dt-recipe-leftbar-row:hover,
-.dt-recipe-leftbar-row:focus-within {
+.d-recipe-leftbar-row:hover,
+.d-recipe-leftbar-row:focus-within {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-hover);
 }
-.dt-recipe-leftbar-row:hover .d-presence,
-.dt-recipe-leftbar-row:focus-within .d-presence {
+.d-recipe-leftbar-row:hover .d-presence,
+.d-recipe-leftbar-row:focus-within .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-recipe-leftbar-row:hover .d-avatar__count,
-.dt-recipe-leftbar-row:focus-within .d-avatar__count {
+.d-recipe-leftbar-row:hover .d-avatar__count,
+.d-recipe-leftbar-row:focus-within .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-recipe-leftbar-row__description {
+.d-recipe-leftbar-row__description {
   overflow: hidden;
   color: var(--leftbar-row-description-color-foreground);
   font-weight: var(--leftbar-row-description-font-weight);
@@ -8718,7 +8718,7 @@ ul {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.dt-recipe-leftbar-row__status {
+.d-recipe-leftbar-row__status {
   padding-bottom: var(--dt-space-100);
   overflow: hidden;
   color: var(--leftbar-row-status-color-foreground);
@@ -8727,29 +8727,29 @@ ul {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.dt-recipe-leftbar-row__meta-context ~ .dt-recipe-leftbar-row__meta-custom:not(:empty)::before {
+.d-recipe-leftbar-row__meta-context ~ .d-recipe-leftbar-row__meta-custom:not(:empty)::before {
   color: var(--dt-theme-sidebar-status-color-foreground);
   content: " • ";
 }
-.dt-recipe-leftbar-row--has-unread {
+.d-recipe-leftbar-row--has-unread {
   --leftbar-row-description-font-weight: var(--dt-font-weight-bold);
   --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
   --leftbar-row-alpha-color-foreground: var(--dt-theme-sidebar-color-foreground-unread);
 }
-.dt-recipe-leftbar-row--muted {
+.d-recipe-leftbar-row--muted {
   --leftbar-row-opacity: 60%;
 }
-.dt-recipe-leftbar-row--selected {
+.d-recipe-leftbar-row--selected {
   --leftbar-row-color-background: var(--dt-theme-sidebar-selected-row-color-background);
   --leftbar-row-description-color-foreground: var(--dt-theme-sidebar-selected-row-color-foreground);
 }
-.dt-recipe-leftbar-row--selected .d-presence {
+.d-recipe-leftbar-row--selected .d-presence {
   --presence-color-border-base: var(--dt-color-black-200);
 }
-.dt-recipe-leftbar-row--selected .d-avatar__count {
+.d-recipe-leftbar-row--selected .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-selected-row-color-background);
 }
-.dt-recipe-leftbar-row__is-typing {
+.d-recipe-leftbar-row__is-typing {
   --is-typing-size-shape: var(--dt-size-550);
   position: absolute;
   display: flex;
@@ -8761,7 +8761,7 @@ ul {
   border-radius: var(--dt-size-radius-pill);
   opacity: 0.75;
 }
-.dt-recipe-leftbar-row__is-typing span {
+.d-recipe-leftbar-row__is-typing span {
   display: inline-block;
   width: var(--dt-size-300);
   height: var(--dt-size-300);
@@ -8770,22 +8770,22 @@ ul {
   border-radius: var(--dt-size-radius-pill);
   opacity: 0.3;
   transition: all 500ms ease;
-  -webkit-animation: wave 1.5s ease infinite;
-          animation: wave 1.5s ease infinite;
+  -webkit-animation: d-recipe-leftbar-row-wave 1.5s ease infinite;
+          animation: d-recipe-leftbar-row-wave 1.5s ease infinite;
 }
-.dt-recipe-leftbar-row__is-typing span:nth-child(1) {
+.d-recipe-leftbar-row__is-typing span:nth-child(1) {
   -webkit-animation-delay: 0ms;
           animation-delay: 0ms;
 }
-.dt-recipe-leftbar-row__is-typing span:nth-child(2) {
+.d-recipe-leftbar-row__is-typing span:nth-child(2) {
   -webkit-animation-delay: var(--td100);
           animation-delay: var(--td100);
 }
-.dt-recipe-leftbar-row__is-typing span:nth-child(3) {
+.d-recipe-leftbar-row__is-typing span:nth-child(3) {
   -webkit-animation-delay: var(--td200);
           animation-delay: var(--td200);
 }
-.dt-recipe-leftbar-row__primary {
+.d-recipe-leftbar-row__primary {
   display: flex;
   flex: 1;
   align-items: center;
@@ -8803,18 +8803,18 @@ ul {
   -webkit-appearance: none;
           appearance: none;
 }
-.dt-recipe-leftbar-row__primary:active {
+.d-recipe-leftbar-row__primary:active {
   --leftbar-row-color-background: var(--dt-theme-sidebar-row-color-background-active);
 }
-.dt-recipe-leftbar-row__primary:focus-visible {
+.d-recipe-leftbar-row__primary:focus-visible {
   box-shadow: var(--dt-shadow-focus-inset);
 }
-.dt-recipe-leftbar-row__action-button {
+.d-recipe-leftbar-row__action-button {
   width: var(--leftbar-row-action-width);
   height: var(--leftbar-row-action-height);
   opacity: 0;
 }
-.dt-recipe-leftbar-row__alpha {
+.d-recipe-leftbar-row__alpha {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -8826,11 +8826,11 @@ ul {
   color: var(--leftbar-row-alpha-color-foreground);
   border-radius: var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius);
 }
-.dt-recipe-leftbar-row__label {
+.d-recipe-leftbar-row__label {
   flex: 0 1;
   min-width: 0;
 }
-.dt-recipe-leftbar-row__omega {
+.d-recipe-leftbar-row__omega {
   position: absolute;
   top: var(--leftbar-row-action-position-bottom);
   right: var(--leftbar-row-action-position-right);
@@ -8843,33 +8843,33 @@ ul {
   -webkit-transform: translateY(calc(var(--leftbar-row-action-position-bottom) * -1));
           transform: translateY(calc(var(--leftbar-row-action-position-bottom) * -1));
 }
-.dt-recipe-leftbar-row__unread-badge {
+.d-recipe-leftbar-row__unread-badge {
   display: var(--leftbar-row-unread-badge-display);
   color: var(--dt-theme-mention-color-foreground);
   background-color: var(--dt-theme-mention-color-background);
 }
-.dt-recipe-leftbar-row__unread-count .dt-recipe-leftbar-row__action {
+.d-recipe-leftbar-row__unread-count .d-recipe-leftbar-row__action {
   display: none;
 }
-.dt-recipe-leftbar-row__unread-count-badge {
+.d-recipe-leftbar-row__unread-count-badge {
   border-top-right-radius: var(--dt-size-radius-0);
   border-bottom-right-radius: var(--dt-size-radius-0);
 }
-.dt-recipe-leftbar-row__unread-mention-count-badge {
+.d-recipe-leftbar-row__unread-mention-count-badge {
   color: var(--dt-theme-mention-color-foreground-strong);
   background-color: var(--dt-theme-mention-color-background-strong);
   border-top-left-radius: var(--dt-size-radius-0);
   border-bottom-left-radius: var(--dt-size-radius-0);
 }
-.dt-recipe-leftbar-row__unread-mention-only-count-badge {
+.d-recipe-leftbar-row__unread-mention-only-count-badge {
   color: var(--dt-theme-mention-color-foreground-strong);
   background-color: var(--dt-theme-mention-color-background-strong);
 }
-.dt-recipe-leftbar-row__active-voice {
+.d-recipe-leftbar-row__active-voice {
   display: inline-flex;
   color: var(--dt-color-purple-400);
-  -webkit-animation-name: opacity-pulsate;
-  animation-name: opacity-pulsate;
+  -webkit-animation-name: d-recipe-leftbar-row-opacity-pulsate;
+  animation-name: d-recipe-leftbar-row-opacity-pulsate;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-iteration-count: infinite;
@@ -8877,7 +8877,7 @@ ul {
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
 }
-.dt-recipe-leftbar-row__dnd {
+.d-recipe-leftbar-row__dnd {
   padding-top: var(--dt-space-200);
   padding-right: var(--dt-space-300);
   color: var(--dt-color-foreground-tertiary);
@@ -8885,33 +8885,33 @@ ul {
   font-size: var(--dt-font-size-100);
   line-height: var(--dt-font-line-height-400);
 }
-.dt-recipe-leftbar-row__container--off-duty {
+.d-recipe-leftbar-row__container--off-duty {
   background-color: var(--dt-badge-color-background-critical);
   border: var(--dt-size-100) solid var(--dt-color-border-subtle);
   border-radius: var(--dt-size-radius-500);
 }
-.dt-recipe-leftbar-row__container--off-duty .dt-recipe-leftbar-row__primary {
+.d-recipe-leftbar-row__container--off-duty .d-recipe-leftbar-row__primary {
   margin: calc(var(--dt-size-100) * -1);
 }
-.dt-recipe-leftbar-row--contact-centers .dt-recipe-leftbar-row__alpha {
+.d-recipe-leftbar-row--contact-centers .d-recipe-leftbar-row__alpha {
   padding-right: var(--dt-space-450);
   padding-left: var(--dt-space-450);
 }
-.dt-recipe-leftbar-row--contact-centers .dt-recipe-leftbar-row__action-container {
+.d-recipe-leftbar-row--contact-centers .d-recipe-leftbar-row__action-container {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
   min-width: var(--dt-size-600);
   height: var(--dt-size-500);
 }
-.dt-recipe-leftbar-row__icon-cc {
+.d-recipe-leftbar-row__icon-cc {
   width: calc(var(--dt-size-300) * 3.5);
   height: calc(var(--dt-size-300) * 3.5);
   border-radius: var(--dt-size-200);
 }
-.opacity-pulsate {
-  -webkit-animation-name: opacity-pulsate;
-  animation-name: opacity-pulsate;
+.d-recipe-leftbar-row-opacity-pulsate {
+  -webkit-animation-name: d-recipe-leftbar-row-opacity-pulsate;
+  animation-name: d-recipe-leftbar-row-opacity-pulsate;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-iteration-count: infinite;
@@ -8919,25 +8919,7 @@ ul {
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
 }
-@-webkit-keyframes opacity-pulsate {
-  0%,
-  100% {
-    opacity: 0.2;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-@keyframes opacity-pulsate {
-  0%,
-  100% {
-    opacity: 0.2;
-  }
-  50% {
-    opacity: 1;
-  }
-}
-@keyframes opacity-pulsate {
+@-webkit-keyframes d-recipe-leftbar-row-opacity-pulsate {
   0%,
   100% {
     opacity: 0.2;
@@ -8946,7 +8928,7 @@ ul {
     opacity: 1;
   }
 }
-@keyframes opacity-pulsate {
+@keyframes d-recipe-leftbar-row-opacity-pulsate {
   0%,
   100% {
     opacity: 0.2;
@@ -8955,7 +8937,7 @@ ul {
     opacity: 1;
   }
 }
-@-webkit-keyframes wave {
+@-webkit-keyframes d-recipe-leftbar-row-wave {
   0%,
   50%,
   100% {
@@ -8968,7 +8950,7 @@ ul {
     opacity: 0.9;
   }
 }
-@keyframes wave {
+@keyframes d-recipe-leftbar-row-wave {
   0%,
   50%,
   100% {
@@ -8981,7 +8963,7 @@ ul {
     opacity: 0.9;
   }
 }
-.dt-recipe-message-input {
+.d-recipe-message-input {
   display: flex;
   flex-direction: column;
   line-height: var(--dt-font-line-height-400);
@@ -8993,53 +8975,53 @@ ul {
   transition-duration: var(--td50);
   transition-property: border-color, box-shadow, opacity;
 }
-.dt-recipe-message-input:focus-within {
+.d-recipe-message-input:focus-within {
   border-color: var(--dt-color-border-bold);
   box-shadow: 0 0 var(--dt-size-300) 0 var(--dt-color-surface-moderate-opaque);
 }
-.dt-recipe-message-input__editor-wrapper {
+.d-recipe-message-input__editor-wrapper {
   padding: var(--dt-space-450) var(--dt-space-500) var(--dt-space-300);
 }
-.dt-recipe-message-input__remaining-char {
+.d-recipe-message-input__remaining-char {
   margin-right: var(--dt-space-300);
   color: var(--dt-color-foreground-critical);
   font-size: var(--dt-font-size-100);
 }
-.dt-recipe-message-input__remaining-char__tooltip {
+.d-recipe-message-input__remaining-char-tooltip {
   margin-top: auto;
   margin-bottom: auto;
 }
-.dt-recipe-message-input__button {
+.d-recipe-message-input__button {
   max-width: 2.8rem;
   max-height: 2.8rem;
   border-radius: var(--dt-size-radius-300);
 }
-.dt-recipe-message-input__send-button.dt-recipe-message-input__button:not(.d-btn--icon-only),
-.dt-recipe-message-input__cancel-button {
+.d-recipe-message-input__send-button.d-recipe-message-input__button:not(.d-btn--icon-only),
+.d-recipe-message-input__cancel-button {
   max-width: unset;
   padding: var(--dt-space-350);
 }
-.dt-recipe-message-input__send-button--disabled {
+.d-recipe-message-input__send-button--disabled {
   color: var(--dt-color-foreground-muted);
   background-color: unset;
   cursor: default;
 }
-.dt-recipe-message-input__bottom-section {
+.d-recipe-message-input__bottom-section {
   display: flex;
   justify-content: space-between;
   padding: var(--dt-space-300) var(--dt-space-400) var(--dt-space-400);
 }
-.dt-recipe-message-input__bottom-section-left,
-.dt-recipe-message-input__bottom-section-right {
+.d-recipe-message-input__bottom-section-left,
+.d-recipe-message-input__bottom-section-right {
   display: flex;
 }
-.dt-recipe-message-input__image-input {
+.d-recipe-message-input__image-input {
   position: absolute;
 }
-.dt-recipe-message-input-meeting-pill {
+.d-recipe-message-input-meeting-pill {
   display: inline-block;
 }
-.dt-recipe-message-input-meeting-pill__layout {
+.d-recipe-message-input-meeting-pill__layout {
   grid-template-areas: 'left content right';
   grid-template-columns: minmax(0, -webkit-max-content) 1fr minmax(0, -webkit-max-content);
   grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
@@ -9051,16 +9033,16 @@ ul {
   border: var(--dt-size-border-100) solid var(--dt-color-border-default);
   border-radius: var(--dt-size-radius-300);
 }
-.dt-recipe-message-input-meeting-pill__icon {
+.d-recipe-message-input-meeting-pill__icon {
   display: flex;
   align-items: center;
   padding: var(--dt-space-350);
 }
-.dt-recipe-message-input-meeting-pill__close {
+.d-recipe-message-input-meeting-pill__close {
   display: flex;
   justify-content: flex-end;
 }
-.dt-recipe-settings-menu-button {
+.d-recipe-settings-menu-button {
   width: var(--dt-size-550);
   height: var(--dt-size-600);
   padding: var(--dt-space-0);
@@ -9068,25 +9050,25 @@ ul {
   background-color: var(--dt-theme-topbar-button-color-background);
   border-radius: var(--dt-size-550);
 }
-.dt-recipe-settings-menu-button:hover {
+.d-recipe-settings-menu-button:hover {
   color: var(--dt-theme-topbar-button-color-foreground-hover);
   background-color: var(--dt-theme-topbar-button-color-background-hover);
 }
-.dt-recipe-settings-menu-button:active {
+.d-recipe-settings-menu-button:active {
   background-color: var(--dt-theme-topbar-button-color-background-active);
 }
-.dt-recipe-settings-menu-button-update {
+.d-recipe-settings-menu-button-update {
   height: var(--dt-size-600);
   color: var(--dt-color-blue-500);
   background-color: hsla(var(--dt-color-blue-200-hsl) / 0.25);
   border-color: hsla(var(--dt-color-blue-200-hsl) / 0.25);
   border-radius: var(--dt-size-radius-pill);
 }
-.dt-recipe-settings-menu-button-update:hover {
+.d-recipe-settings-menu-button-update:hover {
   color: var(--dt-theme-topbar-button-color-foreground-hover);
   background-color: hsla(var(--dt-color-blue-200-hsl) / 0.5);
 }
-.dt-recipe-time-pill {
+.d-recipe-time-pill {
   padding: var(--dt-space-300) var(--dt-space-500);
   color: var(--dt-color-foreground-primary);
   font-size: var(--dt-font-size-100);
@@ -9095,34 +9077,34 @@ ul {
   border: var(--dt-size-border-100) solid var(--dt-color-border-default);
   border-radius: var(--dt-size-radius-pill);
 }
-.dt-recipe-top-banner-info {
+.d-recipe-top-banner-info {
   display: flex;
   align-items: center;
   justify-content: space-between;
   color: var(--dt-color-foreground-primary);
   font-size: var(--dt-font-size-100);
 }
-.dt-recipe-top-banner-info__left {
-  min-width: 20%;
+.d-recipe-top-banner-info__left {
+  min-width: var(--dt-size-20-percent);
   margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);
 }
-.dt-recipe-top-banner-info__middle {
+.d-recipe-top-banner-info__middle {
   display: flex;
   gap: var(--dt-size-300);
   align-items: center;
   margin-top: var(--dt-space-300);
   margin-bottom: var(--dt-space-300);
 }
-.dt-recipe-top-banner-info__right {
+.d-recipe-top-banner-info__right {
   display: flex;
   gap: var(--dt-size-300);
   align-items: baseline;
   justify-content: flex-end;
-  min-width: 20%;
+  min-width: var(--dt-size-20-percent);
   margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;
   text-align: right;
 }
-.dt-recipe-leftbar-unread-pill {
+.d-recipe-leftbar-unread-pill {
   display: flex;
   gap: var(--dt-space-300);
   align-items: center;
@@ -9135,12 +9117,12 @@ ul {
   box-shadow: var(--dt-shadow-medium);
   cursor: pointer;
 }
-.dt-recipe-leftbar-unread-pill-mentions {
+.d-recipe-leftbar-unread-pill-mentions {
   color: var(--dt-theme-mention-color-foreground);
   font-weight: var(--dt-font-weight-bold);
   background-color: var(--dt-theme-mention-color-background);
 }
-.dt-recipe-leftbar-unread-pill-messages {
+.d-recipe-leftbar-unread-pill-messages {
   color: var(--dt-color-foreground-secondary-inverted);
   background-color: var(--dt-color-surface-contrast);
 }