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

Dialpad's design system

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

  &:focus-visible {
    box-shadow: var(--dt-shadow-focus-inset);
  }

  .d-list-item__left {
    display: block;
    align-content: flex-start;
    min-width: var(--dt-size-600);
    text-align: end;
  }

  .d-list-item__wrapper {
    min-height: auto;
    padding: 0;
    font: var(--dt-typography-body-md-compact);
  }

  .d-list-item__bottom {
    margin-top: 0;
  }
}

.d-recipe-feed-item-row__state--searched {
  background-color: var(--dt-color-surface-warning-subtle);
}

.d-recipe-feed-item-row__state--error {
  background-color: var(--dt-color-surface-critical-subtle);
}

.d-recipe-feed-item-row__state-transition {
  transition: background-color 2s var(--ttf-in-out) 0s;
}

.d-recipe-feed-item-row--active {
  background-color: var(--dt-color-surface-secondary-opaque);
}

.d-recipe-feed-item-row__avatar-container {
  padding-top: var(--dt-space-300);
  padding-bottom: var(--dt-space-300);
}

.d-recipe-feed-item-row__attachment {
  padding-top: var(--dt-space-200);
  padding-bottom: var(--dt-space-300);
}

.d-recipe-feed-item-row__image {
  display: block;
  min-width: 5.6rem;
  max-width: 30rem;
  min-height: 5.6rem;
  max-height: 30rem;
  border: var(--dt-color-border-subtle) solid var(--dt-size-border-100);
  border-radius: var(--dt-size-radius-400);
}

.d-recipe-feed-item-row__video {
  display: block;
  height: 25.0rem;
}

.d-recipe-feed-item-row__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dt-space-300);
  align-items: baseline;
  font-size: var(--dt-font-size-200);
  line-height: var(--dt-font-line-height-300);
}

.d-recipe-feed-item-row__header-name {
  font-weight: var(--dt-font-weight-bold);
}

.d-recipe-feed-item-row__header-time {
  flex-shrink: 0;
  color: var(--dt-color-foreground-tertiary);
  font-size: var(--dt-font-size-100);
}

.d-recipe-feed-item-row__reactions {
  display: flex;
  flex-wrap: wrap;
  padding-top: var(--dt-space-200);
  padding-bottom: var(--dt-space-200);
}

.d-recipe-feed-item-row__threading {
  padding-top: var(--dt-space-200);
  padding-bottom: var(--dt-space-200);
}

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

.d-recipe-feed-item-row__menu {
  position: absolute;
  top: var(--dt-space-550-negative);
  right: var(--dt-space-450);
}