@dialpad/dialtone-css 8.63.0-next.1 → 8.64.0

package/lib/build/less/components/tooltip.less

@@ -66,7 +66,7 @@
   --tooltip-border-radius: var(--dt-size-radius-300); // 4
 
   z-index: var(--zi-tooltip);
-  max-inline-size: var(--dt-size-875);
+  max-width: var(--dt-size-875);
   padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
   color: var(--tooltip-color-text);
   font-weight: var(--tooltip-font-weight);
@@ -147,13 +147,13 @@
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--top-center,
 .d-tooltip__arrow--top-right {
-inset-block-start: calc(100% + var(--dt-space-450)); // 100% + 12
+top: calc(100% + var(--dt-space-450)); // 100% + 12
 transform: translateY(var(--dt-space-500)); // 16
 
 &::after {
-  inset-block-start: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
-  border-block-start-width: 0;
-  border-block-end-color: var(--tooltip-color-background);
+  top: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
+  border-top-width: 0;
+  border-bottom-color: var(--tooltip-color-background);
 }
 }
 
@@ -165,13 +165,13 @@ transform: translateY(var(--dt-space-500)); // 16
 .d-tooltip__arrow--bottom-left,
 .d-tooltip__arrow--bottom-center,
 .d-tooltip__arrow--bottom-right {
-inset-block-end: calc(100% + var(--dt-space-450)); // 100% + 12
+bottom: calc(100% + var(--dt-space-450)); // 100% + 12
 transform: translateY(var(--dt-space-500-negative)); // -16
 
 &::after {
-  inset-block-end: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
-  border-block-start-color: var(--tooltip-color-background);
-  border-block-end-width: 0;
+  bottom: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
+  border-top-color: var(--tooltip-color-background);
+  border-bottom-width: 0;
 }
 }
 
@@ -181,10 +181,10 @@ transform: translateY(var(--dt-space-500-negative)); // -16
 .d-tooltip__arrow-tippy--top-start,
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--bottom-left {
-inset-inline-start: var(--dt-space-200-negative); // -2
+left: var(--dt-space-200-negative); // -2
 
 &::after {
-  inset-inline-start: var(--dt-space-500); // 16
+  left: var(--dt-space-500); // 16
 }
 }
 
@@ -195,8 +195,8 @@ inset-inline-start: var(--dt-space-200-negative); // -2
 .d-tooltip__arrow--top-center,
 .d-tooltip__arrow--bottom-center {
 &::after {
-  inset-inline-start: 50%;
-  margin-inline-start: var(--dt-space-350-negative); // -6
+  left: 50%;
+  margin-left: var(--dt-space-350-negative); // -6
 }
 }
 
@@ -206,10 +206,10 @@ inset-inline-start: var(--dt-space-200-negative); // -2
 .d-tooltip__arrow-tippy--top-end,
 .d-tooltip__arrow--top-right,
 .d-tooltip__arrow--bottom-right {
-inset-inline-end: var(--dt-space-200-negative); // -2
+right: var(--dt-space-200-negative); // -2
 
 &::after {
-  inset-inline-end: var(--dt-space-500); // 16
+  right: var(--dt-space-500); // 16
 }
 }
 
@@ -221,13 +221,13 @@ inset-inline-end: var(--dt-space-200-negative); // -2
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--right-center,
 .d-tooltip__arrow--right-bottom {
-inset-inline-end: calc(100% + var(--dt-space-450)); // 100% + 12
+right: calc(100% + var(--dt-space-450)); // 100% + 12
 transform: translateX(var(--dt-space-500-negative)); // -16
 
 &::after {
-  inset-inline-end: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
-  border-inline-end-width: 0;
-  border-inline-start-color: var(--tooltip-color-background);
+  right: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
+  border-right-width: 0;
+  border-left-color: var(--tooltip-color-background);
 }
 }
 
@@ -239,13 +239,13 @@ transform: translateX(var(--dt-space-500-negative)); // -16
 .d-tooltip__arrow--left-top,
 .d-tooltip__arrow--left-center,
 .d-tooltip__arrow--left-bottom {
-inset-inline-start: calc(100% + var(--dt-space-450)); // 100% + 12
+left: calc(100% + var(--dt-space-450)); // 100% + 12
 transform: translateX(var(--dt-space-500)); // 16
 
 &::after {
-  inset-inline-start: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
-  border-inline-end-color: var(--tooltip-color-background);
-  border-inline-start-width: 0;
+  left: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
+  border-right-color: var(--tooltip-color-background);
+  border-left-width: 0;
 }
 }
 
@@ -255,10 +255,10 @@ transform: translateX(var(--dt-space-500)); // 16
 .d-tooltip__arrow-tippy--left-start,
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--left-top {
-inset-block-start: var(--dt-space-100-negative); // -1
+top: var(--dt-space-100-negative); // -1
 
 &::after {
-  inset-block-start: var(--dt-space-400); // 8
+  top: var(--dt-space-400); // 8
 }
 }
 
@@ -269,8 +269,8 @@ inset-block-start: var(--dt-space-100-negative); // -1
 .d-tooltip__arrow--right-center,
 .d-tooltip__arrow--left-center {
 &::after {
-  inset-block-start: 50%;
-  margin-block-start: var(--dt-space-350-negative); // -6
+  top: 50%;
+  margin-top: var(--dt-space-350-negative); // -6
 }
 }
 
@@ -280,9 +280,9 @@ inset-block-start: var(--dt-space-100-negative); // -1
 .d-tooltip__arrow-tippy--left-end,
 .d-tooltip__arrow--right-bottom,
 .d-tooltip__arrow--left-bottom {
-inset-block-end: var(--dt-space-100-negative); // -1
+bottom: var(--dt-space-100-negative); // -1
 
 &::after {
-  inset-block-end: var(--dt-space-400); // 8
+  bottom: var(--dt-space-400); // 8
 }
 }

package/lib/build/less/dialtone-reset.less

@@ -43,8 +43,7 @@ main {
  */
 
 h1 {
-  margin-block: 0.67em;
-  margin-inline: 0;
+  margin: 0.67em 0;
   font-size: 2em;
 }
 
@@ -98,7 +97,7 @@ u {
 abbr[title] {
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
-  border-block-end: none; /* 1 */
+  border-bottom: none; /* 1 */
   text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
   text-decoration-thickness: var(--dt-size-border-100);
 }
@@ -151,11 +150,11 @@ sup {
 }
 
 sub {
-  inset-block-end: -0.25em;
+  bottom: -0.25em;
 }
 
 sup {
-  inset-block-start: -0.5em;
+  top: -0.5em;
 }
 
 ol, ul, li {
@@ -252,8 +251,7 @@ button:-moz-focusring,
  */
 
 fieldset {
-  padding-block: 0.35em 0.625em;
-  padding-inline: 0.75em;
+  padding: 0.35em 0.75em 0.625em;
 }
 
 /**

package/lib/build/less/recipes/attachment_carousel.less

@@ -1,14 +1,14 @@
 .d-recipe-attachment-carousel {
   position: relative;
-  inline-size: var(--dt-space-1000);
-  max-block-size: 100px; /* stylelint-disable-line meowtec/no-px */
+  width: var(--dt-space-1000);
+  max-height: 100px; /* stylelint-disable-line meowtec/no-px */
 }
 
 .d-recipe-attachment-carousel__media-list {
   display: flex;
   flex-direction: row;
-  padding-inline-start: 0;
-  overflow-inline: scroll;
+  padding-left: 0;
+  overflow-x: scroll;
 }
 
 .d-recipe-attachment-carousel__media-list::-webkit-scrollbar {
@@ -17,7 +17,7 @@
 
 .d-recipe-attachment-carousel__arrow {
   position: absolute;
-  inset-block-start: var(--dt-space-30-percent);
+  top: var(--dt-space-30-percent);
   background-color: var(--dt-color-neutral-white);
   border: var(--dt-space-100) solid;
   border-color: var(--bc-default);
@@ -30,11 +30,11 @@
 }
 
 .d-recipe-attachment-carousel__arrow--left {
-  inset-inline-start: var(--dt-space-300);
+  left: var(--dt-space-300);
 }
 
 .d-recipe-attachment-carousel__arrow--right {
-  inset-inline-end: var(--dt-space-300);
+  right: var(--dt-space-300);
 }
 
 .d-recipe-attachment-carousel__image {
@@ -43,8 +43,8 @@
 
 .d-recipe-attachment-carousel__image-close-button {
   position: absolute;
-  inset-block-start: inherit;
-  inset-inline-end: inherit;
+  top: inherit;
+  right: inherit;
   color: var(--dt-color-neutral-white);
   background-color: var(--dt-color-black-400);
   border: var(--dt-space-100) solid;
@@ -58,8 +58,8 @@
 }
 
 .d-recipe-attachment-carousel__image-viewer {
-  inline-size: var(--dt-size-700);
-  block-size: var(--dt-size-700);
+  width: var(--dt-size-700);
+  height: var(--dt-size-700);
   object-fit: cover;
   border: var(--dt-space-100) solid;
   border-color: var(--dt-color-border-subtle);
@@ -69,14 +69,14 @@
 
 .d-recipe-attachment-carousel__image-top-right {
   position: absolute;
-  inset-block-start: var(--dt-size-100);
-  inset-inline-end: var(--dt-size-100);
+  top: var(--dt-size-100);
+  right: var(--dt-size-100);
 }
 
 .d-recipe-attachment-carousel__image-progress-bar {
   position: absolute;
-  inset-block-start: inherit;
-  inset-inline-end: inherit;
+  top: inherit;
+  right: inherit;
   display: flex;
   background-color: var(--dt-color-neutral-white);
   border: var(--dt-space-100) solid;
@@ -87,8 +87,8 @@
 }
 
 .d-recipe-attachment-carousel__progress-bar {
-  inline-size: var(--dt-size-550);
-  block-size: var(--dt-size-550);
+  width: var(--dt-size-550);
+  height: var(--dt-size-550);
 }
 
 .d-recipe-attachment-carousel__progress-bar-circle {

package/lib/build/less/recipes/callbar_button.less

@@ -11,7 +11,8 @@
 //  $   BASE STYLE
 //  ----------------------------------------------------------------------------
 .d-recipe-callbar-button {
-  padding-inline: var(--dt-space-0);
+  padding-right: var(--dt-space-0);
+  padding-left: var(--dt-space-0);
   color: var(--dt-color-foreground-primary);
 
   &:not(.d-recipe-callbar-button--circle) {
@@ -38,7 +39,7 @@
 .d-recipe-callbar-button--active,
 .d-recipe-callbar-button--active:hover {
   .base-button__icon {
-    color: var(--dt-theme-mention-color-background); // best replacement for --primary-color we have at the moment
+    color: var(--dt-shell-mention-color-surface-primary); // best replacement for --primary-color we have at the moment
   }
 }
 

package/lib/build/less/recipes/callbar_button_with_dropdown.less

@@ -1,8 +1,8 @@
 .dt-recipe--callbar-button-with-dropdown--arrow {
-  inline-size: var(--dt-size-500);
-  block-size: var(--dt-size-500);
-  margin-block-start: var(--dt-space-450);
-  margin-inline-start: calc(var(--dt-space-300-negative) * 5);
+  width: var(--dt-size-500);
+  height: var(--dt-size-500);
+  margin-top: var(--dt-space-450);
+  margin-left: calc(var(--dt-space-300-negative) * 5);
   padding: var(--dt-space-400);
   border-radius: var(--dt-size-300);
 
@@ -11,7 +11,7 @@
   }
 
   &--large {
-    margin-inline-start: var(--dt-space-550-negative);
+    margin-left: var(--dt-space-550-negative);
   }
 
   &__icon {
@@ -38,12 +38,12 @@
 .dt-recipe--callbar-button-with-dropdown--button .tab-group {
   display: flex;
   flex-direction: column;
-  block-size: 100%;
+  height: 100%;
 }
 
 .dt-recipe--callbar-button-with-dropdown--button .tab-content {
   flex: 1 1 100%;
-  overflow-block: auto;
+  overflow-y: auto;
 }
 
 .dt-recipe--callbar-button-with-dropdown {

package/lib/build/less/recipes/callbar_button_with_popover.less

@@ -4,10 +4,10 @@
 }
 
 .d-recipe-callbar-button-with-popover__arrow {
-  inline-size: var(--dt-size-500);
-  block-size: var(--dt-size-500);
-  margin-block-start: var(--dt-space-450);
-  margin-inline-start: calc(var(--dt-space-300-negative) * 5);
+  width: var(--dt-size-500);
+  height: var(--dt-size-500);
+  margin-top: var(--dt-space-450);
+  margin-left: calc(var(--dt-space-300-negative) * 5);
   padding: var(--dt-space-400);
   border-radius: var(--dt-size-300);
 
@@ -17,7 +17,7 @@
 }
 
 .d-recipe-callbar-button-with-popover__arrow--large {
-  margin-inline-start: var(--dt-space-550-negative);
+  margin-left: var(--dt-space-550-negative);
 }
 
 .d-recipe-callbar-button-with-popover__arrow-icon {
@@ -37,7 +37,8 @@
   .d-popover__header__content {
     display: flex;
     align-items: center;
-    padding-inline: var(--dt-space-450) var(--dt-space-450);
+    padding-right: var(--dt-space-450);
+    padding-left: var(--dt-space-450);
     font-weight: normal;
   }
 }
@@ -51,11 +52,11 @@
   &.tab-group {
     display: flex;
     flex-direction: column;
-    block-size: 100%;
+    height: 100%;
   }
 
   &.tab-content {
     flex: 1 1 100%;
-    overflow-block: auto;
+    overflow-y: auto;
   }
 }

package/lib/build/less/recipes/callbox.less

@@ -1,6 +1,6 @@
 .d-recipe-callbox {
   padding: 0;
-  color: var(--dt-color-foreground-primary);
+  color: var(--dt-shell-color-foreground-primary);
   background-color: var(--dt-color-surface-primary);
   border-radius: var(--dt-size-radius-400);
 }
@@ -24,7 +24,7 @@
   }
 
   &.d-recipe-callbox__border-default {
-    border-color: var(--dt-color-border-default);
+    border-color: var(--dt-shell-color-border-default);
   }
 
   &.d-recipe-callbox__border-ai {
@@ -50,7 +50,7 @@
 }
 
 .d-recipe-callbox__main-content-bottom {
-  border-block-start: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
+  border-top: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
 }
 
 .d-recipe-callbox__content {
@@ -58,23 +58,23 @@
   flex: 1 0 auto;
   flex-direction: column;
   gap: var(--dt-space-300);
-  min-inline-size: 0;
+  min-width: 0;
   padding-inline-start: var(--dt-space-200);
 }
 
 .d-recipe-callbox__content-title {
+  width: 0;
+  min-width: 100%;
   padding: 0;
   overflow: clip;
+  color: var(--dt-shell-color-foreground-strong);
   font: var(--dt-typography-headline-md);
-  font-weight: var(--dt-font-weight-bold);
   line-height: var(--dt-font-line-height-100);
   white-space: nowrap;
-  text-align: start;
+  text-align: left;
   text-overflow: ellipsis;
   background-color: var(--dt-color-surface-primary);
   border: none;
-  inline-size: 0;
-  min-inline-size: 100%;
 }
 
 .d-recipe-callbox__content-badge {
@@ -82,11 +82,11 @@
 }
 
 .d-recipe-callbox__content-subtitle {
-  inline-size: 0;
-  min-inline-size: 100%;
+  width: 0;
+  min-width: 100%;
   padding: 0;
   overflow: hidden;
-  color: var(--dt-color-foreground-tertiary);
+  color: var(--dt-shell-color-foreground-tertiary);
   font: var(--dt-typography-body-sm-compact);
 }
 

package/lib/build/less/recipes/combobox_multi_select.less

@@ -1,28 +1,30 @@
 .d-recipe-combobox-multi-select__chip {
   z-index: var(--zi-base1);
-  max-inline-size: var(--dt-size-100-percent);
-  margin-block-start: var(--dt-space-300);
-  margin-inline: var(--dt-space-200);
+  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);
 }
 
 .d-recipe-combobox-multi-select__chip-wrapper {
   position: absolute;
-  max-inline-size: calc(var(--dt-size-100-percent) - var(--dt-space-400));
-  max-block-size: initial;
-  margin-inline: var(--dt-space-200);
-  padding-inline-start: var(--dt-space-100);
-  overflow-block: visible;
+  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));
+  max-height: initial;
+  margin-right: var(--dt-space-200);
+  margin-left: var(--dt-space-200);
+  padding-left: var(--dt-space-100);
+  overflow-y: visible;
 }
 
 .d-recipe-combobox-multi-select__chip-wrapper-md--collapsed {
-  max-block-size: 2.8rem;
-  overflow-block: hidden;
+  max-height: 2.8rem;
+  overflow-y: hidden;
 }
 
 .d-recipe-combobox-multi-select__chip-wrapper-sm--collapsed,
 .d-recipe-combobox-multi-select__chip-wrapper-xs--collapsed {
-  max-block-size: 2.5rem;
-  overflow-block: hidden;
+  max-height: 2.5rem;
+  overflow-y: hidden;
 }
 
 .d-recipe-combobox-multi-select__chip--truncate {
@@ -44,11 +46,12 @@
 }
 
 .d-recipe-combobox-multi-select__list .d-list-item__content {
-  min-block-size: calc(var(--dt-size-550) + var(--dt-size-300));
+  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
 }
 
 
 .d-recipe-combobox-multi-select__list--loading {
-  padding-block: var(--dt-space-500);
+  padding-top: var(--dt-space-500);
+  padding-bottom: var(--dt-space-500);
   text-align: center;
 }

package/lib/build/less/recipes/combobox_with_popover.less

@@ -1,3 +1,3 @@
 .d-recipe-combobox-with-popover__list .d-list-item__content {
-  min-block-size: calc(var(--dt-size-550) + var(--dt-size-300));
+  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
 }

package/lib/build/less/recipes/contact_info.less

@@ -10,8 +10,8 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  min-inline-size: var(--dt-space-650);
-  block-size: var(--dt-size-100-percent);
+  min-width: var(--dt-space-650);
+  height: var(--dt-size-100-percent);
   background-color: transparent;
   background-image: none;
   border-width: 0;
@@ -24,25 +24,25 @@
 }
 
 .d-recipe-contact-info__subtitle {
-  margin-block-start: var(--dt-space-200-negative);
+  margin-top: var(--dt-space-200-negative);
   color: var(--dt-color-foreground-tertiary);
   font-size: var(--dt-font-size-100);
 }
 
 .d-recipe-contact-info__bottom {
-  margin-block-start: var(--dt-space-200);
+  margin-top: var(--dt-space-200);
 }
 
 .d-recipe-contact-info__right {
   display: grid;
   align-content: center;
-  min-inline-size: 0;
+  min-width: 0;
 }
 
 .d-recipe-contact-info__avatars {
   display: flex;
   flex-direction: row;
-  margin-inline-end: var(--dt-space-300-negative);
+  margin-right: var(--dt-space-300-negative);
 
   .d-avatar {
     box-sizing: unset;
@@ -50,7 +50,7 @@
     border-radius: var(--dt-size-radius-pill);
 
     &.d-recipe-contact-info__avatar-stacked {
-      margin-inline-start: var(--dt-space-550-negative);
+      margin-left: var(--dt-space-550-negative);
     }
 
     &.d-recipe-contact-info__avatar-halo {

package/lib/build/less/recipes/editor.less

@@ -9,15 +9,16 @@
 }
 
 .d-recipe-editor__button-group-divider {
-  inline-size: var(--dt-size-100);
-  block-size: calc(var(--dt-size-550) + var(--dt-size-300));
-  margin-inline-start: var(--dt-space-400);
+  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);
 }
 
 .d-recipe-editor-link__input-wrapper {
-  margin-block-start: var(--dt-space-350);
-  padding-block: var(--dt-space-200) var(--dt-space-200);
+  margin-top: var(--dt-space-350);
+  padding-top: var(--dt-space-200);
+  padding-bottom: var(--dt-space-200);
   background-color: var(--dt-color-surface-secondary);
   border: var(--dt-size-border-100) solid var(--dt-color-border-default);
   outline: none;
@@ -29,7 +30,8 @@
 }
 
 .d-recipe-editor__popover-footer {
-  padding-inline: var(--dt-space-550) var(--dt-space-450);
+  padding-right: var(--dt-space-450);
+  padding-left: var(--dt-space-550);
 }
 
 .d-recipe-editor__content {
@@ -39,8 +41,9 @@
 }
 
 .d-recipe-editor__content-input {
-  margin-block: var(--dt-space-350) var(--dt-space-350);
-  margin-inline-start: var(--dt-space-500);
+  margin-top: var(--dt-space-350);
+  margin-bottom: var(--dt-space-350);
+  margin-left: var(--dt-space-500);
 }
 
 .d-recipe-editor__link {

package/lib/build/less/recipes/emoji_row.less

@@ -9,7 +9,29 @@
 }
 
 .d-recipe-emoji-row__tooltip-content {
-   max-inline-size: var(--dt-size-975);
+   max-inline-size: var(--dt-size-875);
+}
+
+.d-recipe-emoji-row__tooltip-emoji {
+  display: inline-block;
+  padding: var(--dt-space-300);
+  background-color: var(--dt-color-neutral-white);
+  border-radius: var(--dt-size-radius-300);
+  margin-block: var(--dt-space-300) var(--dt-space-350);
+
+  .d-emoji {
+    height: var(--icon-size);
+  }
+}
+
+.d-recipe-emoji-row__tooltip-names {
+  display: inline-block;
+  font-weight: var(--dt-font-weight-semi-bold);
+}
+
+.d-recipe-emoji-row__tooltip-label {
+  color: var(--dt-color-foreground-secondary-inverted);
+  font-weight: var(--dt-font-weight-medium);
 }
 
 .d-recipe-emoji-row__reaction {
@@ -17,7 +39,7 @@
   --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);
   --emoji-item-color-background: var(--dt-action-color-background-muted-hover);
 
-  block-size: var(--dt-size-550);
+  height: var(--dt-size-550);
   padding: var(--dt-space-300) var(--dt-space-400);
   color: var(--emoji-item-color-foreground);
   background-color: var(--emoji-item-color-background);
@@ -30,7 +52,7 @@
   }
 
   &:hover {
-    --emoji-item-color-inset-shadow: var(--dt-color-border-subtle);
+    --emoji-item-color-inset-shadow: var(--dt-color-border-moderate);
     --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-hover);
   }
 
@@ -72,6 +94,15 @@
 }
 
 .d-recipe-emoji-row__emoji {
+  --emoji-size: calc(var(--dt-icon-size-200) + .2rem);
+
   display: inline-flex;
   margin-inline-end: var(--dt-space-300);
+  inline-size: var(--emoji-size);
+  block-size: var(--emoji-size);
+}
+
+.d-recipe-emoji-row__emoji-img {
+  inline-size: var(--emoji-size);
+  block-size: var(--emoji-size);
 }