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

Dialpad's design system

.d-recipe-top-banner-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--dt-color-foreground-primary);
  font-size: var(--dt-font-size-100);
}

.d-recipe-top-banner-info__left {
  min-width: var(--dt-size-20-percent);
  margin: var(--dt-space-300) 0 var(--dt-space-300) var(--dt-space-400);
}

.d-recipe-top-banner-info__middle {
  display: flex;
  gap: var(--dt-size-300);
  align-items: center;
  margin-top: var(--dt-space-300);
  margin-bottom: var(--dt-space-300);
}

.d-recipe-top-banner-info__right {
  display: flex;
  gap: var(--dt-size-300);
  align-items: baseline;
  justify-content: flex-end;
  min-width: var(--dt-size-20-percent);
  margin: var(--dt-space-300) var(--dt-space-500) var(--dt-space-300) 0;
  text-align: right;
}

.d-recipe-top-banner-info--success {
  background-color: var(--dt-color-surface-success);
}

.d-recipe-top-banner-info--critical {
  background-color: var(--dt-color-surface-critical);
}

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

.d-recipe-top-banner-info--info {
  background-color: var(--dt-color-surface-info);
}

.d-recipe-top-banner-info--primary {
  background-color: var(--dt-color-surface-primary);
}