@dialpad/dialtone-css/lib/build/less/recipes/message_input.less

Dialpad's design system

.d-recipe-message-input {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: var(--dt-font-line-height-400);
  border: var(--dt-size-border-100) solid;
  border-color: var(--dt-color-border-default);
  border-radius: var(--dt-size-radius-400);
  cursor: text;
  transition-timing-function: var(--ttf-in-out);
  transition-duration: var(--td50);
  transition-property: border-color, box-shadow, opacity;

  &:focus-within {
    border-color: var(--dt-color-border-bold);
    box-shadow: 0 0 var(--dt-size-300) 0 var(--dt-color-surface-moderate-opaque);
  }
}

.d-recipe-message-input__button-stack {
  padding: var(--dt-space-400);
  background-color: var(--dt-color-surface-secondary);
}

.d-recipe-message-input__button-stack-icon {
  font-weight: var(--dt-font-weight-bold);
}

.d-recipe-message-input__editor-wrapper {
  padding: var(--dt-space-450) var(--dt-space-500) var(--dt-space-300);
}

.d-recipe-message-input__link-popover {
  width: 36.0rem;
}

.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);
}

.d-recipe-message-input__remaining-char-tooltip {
  margin-top: auto;
  margin-bottom: auto;
}

.d-recipe-message-input__button {
  max-width: 2.8rem;
  max-height: 2.8rem;
  border-radius: var(--dt-size-radius-300);
}

.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);
}

.d-recipe-message-input__send-button--disabled {
  color: var(--dt-color-foreground-muted);
  background-color: unset;
  cursor: default;
}

.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);
}

.d-recipe-message-input__bottom-section-left,
.d-recipe-message-input__bottom-section-right {
  display: flex;
}

.d-recipe-message-input__image-input {
  position: absolute;
}

.d-recipe-message-input-meeting-pill {
  display: inline-block;
}

.d-recipe-message-input-meeting-pill__layout {
  grid-template-areas: 'left content right';
  grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content);
  gap: var(--dt-space-400);
  align-items: center;
  max-width: var(--dt-size-905);
  padding: var(--dt-space-200) var(--dt-space-400);
  font: var(--dt-typography-headline-md);
  border: var(--dt-size-border-100) solid var(--dt-color-border-default);
  border-radius: var(--dt-size-radius-300);
}

.d-recipe-message-input-meeting-pill__icon {
  display: flex;
  align-items: center;
  padding: var(--dt-space-350);
}

.d-recipe-message-input-meeting-pill__close {
  display: flex;
  justify-content: flex-end;
}

.d-recipe-message-input__sms-count {
  display: flex;
  align-items: center;
}

.d-recipe-message-input--button-group-divider {
  width: var(--dt-size-100);
  height: calc(var(--dt-size-550) + var(--dt-size-300));
  margin-right: var(--dt-space-300);
  margin-left: var(--dt-space-300);
  background: var(--dt-color-border-subtle);
}

.d-recipe-message-input__link-dialog-title {
  font: var(--dt-typography-headline-md-compact);
}

.d-recipe-message-input__link-dialog-buttons {
  justify-content: space-between;
}

.d-recipe-message-input__link-input {
  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-space-100) solid;
  border-color: var(--dt-color-border-default);
}