@scope (.temperature-tag) {
  :scope {
    display: inline-flex;
    align-self: flex-start;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-full);
    line-height: var(--leading-none);
    white-space: nowrap;
  }

  :scope.temperature-tag--hot {
    background: var(--color-error-muted);
    color: var(--color-error-text);
  }

  :scope.temperature-tag--warm {
    background: var(--color-warning-muted);
    color: var(--color-warning-text);
  }

  :scope.temperature-tag--cold {
    background: var(--color-info-muted);
    color: var(--color-info-text);
  }
}