/* Keep translated labels inside their source component boundaries. */
html:not([data-locale="en"]) .ant-menu-title-content,
html:not([data-locale="en"]) .guide-step3-button {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:not([data-locale="en"]) .ant-menu-title-content > *,
html:not([data-locale="en"]) .guide-step3-button > * {
  min-width: 0;
  max-width: 100%;
}

html:not([data-locale="en"]) .affiliate-reward-badge {
  max-width: 100%;
  overflow: visible;
}

html:not([data-locale="en"])
  [class*="text-color"][class*="text-size-text"] {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-locale="km"] body,
html[data-locale="hi"] body,
html[data-locale="th"] body {
  line-break: auto;
  overflow-wrap: normal;
  word-break: normal;
}

@media screen and (max-width: 660px) {
  html:not([data-locale="en"]) .mobile-bottom-nav .nav-item,
  html:not([data-locale="en"]) .bottom-nav .nav-item,
  html:not([data-locale="en"]) [class*="BottomNav"] .nav-item {
    min-width: 0;
    overflow: hidden;
  }

  html:not([data-locale="en"]) .nav-item .img-content--refer-badge {
    max-width: calc(100% + 12px);
    transform: scale(0.62);
    transform-origin: center bottom;
  }
}