.charcoal-hint-text {
  background-color: var(--charcoal-surface3);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;

  &[data-context='page'] {
    justify-content: center;

    @media (min-width: 744px) {
      padding: 20px 40px;
    }
  }
}

.charcoal-hint-text-icon {
  display: flex;
  align-items: center;
  color: var(--charcoal-text3);
  height: 22px;
  margin: 0 4px 0 0;
}

.charcoal-hint-text-message {
  color: var(--charcoal-text2);
  font-size: 14px;
  line-height: 22px;
  display: flow-root;
  margin: 0;
  min-width: 0;
  overflow-wrap: break-word;
}