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

Dialpad's design system

.d-recipe-callbox {
  padding: 0;
  color: var(--dt-color-foreground-primary);
  background-color: var(--dt-color-surface-primary);
  border-radius: var(--dt-size-radius-300);
}

.d-recipe-callbox__video {
  display: flex;
  margin-bottom: var(--dt-space-300-negative);
  overflow: clip;
  border-radius: var(--dt-size-radius-200) var(--dt-size-radius-200) 0 0;
}

.d-recipe-callbox__main-content {
  align-items: stretch;
  padding: 0;
  border: var(--dt-size-border-100) solid transparent;
  border-radius: var(--dt-size-radius-300);

  &.d-recipe-callbox__border-default {
    border-color: var(--dt-color-border-default);
  }

  &.d-recipe-callbox__border-ai {
    background: linear-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,
    linear-gradient(135deg, var(--dt-color-border-accent), var(--dt-color-border-brand)) border-box;
  }

  &.d-recipe-callbox__border-critical {
    background: radial-gradient(var(--dt-color-surface-primary), var(--dt-color-surface-primary)) padding-box,
    radial-gradient(circle, #E7301D, #F78B23) border-box;
  }
}

.d-recipe-callbox__main-content-top {
  display: flex;
  align-items: center;
  padding: var(--dt-space-350) var(--dt-space-400);
}

.d-recipe-callbox__main-content-bottom {
  border-top: 1px solid var(--dt-color-border-subtle);
}

.d-recipe-callbox__avatar {
  margin-right: var(--dt-space-400);
}

.d-recipe-callbox__content {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  min-width: 0;
}

.d-recipe-callbox__content-title {
  width: 0;
  min-width: 100%;
  padding: 0;
  overflow: clip;
  color: var(--dt-color-foreground-primary);
  font-weight: var(--dt-font-weight-bold);
  line-height: normal;
  white-space: nowrap;
  text-align: left;
  text-overflow: ellipsis;
  background-color: var(--dt-color-surface-primary);
  border: none;
  user-select: text;
}

.d-recipe-callbox__content-badge {
  line-height: normal;
}

.d-recipe-callbox__content-subtitle {
  width: 0;
  min-width: 100%;
  padding: 0;
  overflow: hidden;
  color: var(--dt-color-foreground-tertiary);
  font-size: var(--dt-font-size-100);
  line-height: normal;
}

.d-recipe-callbox__right {
  display: flex;
  justify-content: right;
}

.d-recipe-callbox--clickable {
  .d-recipe-callbox__content-title {
    border-radius: var(--dt-size-100);
    cursor: pointer;
    user-select: none;

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

    &:hover, &:active {
      text-decoration: underline;
    }
  }
}

.d-recipe-callbox__badge--warning {
  background-color: var(--dt-color-surface-warning);
}